3.8 CSS浮动布局-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.8 CSS浮动布局 主要内容 CONTENTS PART 01 标准文档流 PART 03 清除浮动 PART 02 设置浮动 2 标准文档流 标准文档流又称标准流、文档流，是默认的网页元素布局模式。在这种模式下，元素在浏览器里按照人类的阅读习惯，从左向右、从上到下依次排列。 在排列中，HTML元素按照显示模式有块级、行级、行内块级三种类型。块级元素会垂直排列，行级元素和行内块级元素会水平排列。 设置浮动 float属性用于设置HTML元素是否浮动。 none：隐藏元素。 left：设置元素浮在左边。 right：设置元素浮在右边。 float:none | left | right 设置浮动 网页基本结构分析 网页结构从上到下通常分为页眉、导航、内容和页脚等。网页布局时首先划分版心，明确信息存放的区域 设置浮动 DIV+CSS实现基础布局网页布局是按照流技术（先行后列）进行排列的，每行中一般划分为1~3个模块区域，这些模块将整个网页划分成了若干个功能区域。 1行1列布局 div1 DIV结构： <div class="div1"> </div> CSS样式： .div1{ width: 600px; height: 100px; background-color: red; margin: 10px auto; } 设置浮动 1行2列布局 DIV结构： <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> CSS样式： .div1{ width: 600px; height: 100px; background-color: red; margin: 10px auto; } .div2,.div3{ width: 270px; height: 80px; background-color: green; padding: 10px; } /*方法1*/ .div2{ float: left; } .div3{ float: right; } /* 方法2 */ /* .div3{ float: left; margin-left: 20px; } */ 设置浮动 1行3列布局 DIV结构： <div class="div1"> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> CSS样式： .div1{ width: 590px; height: 100px; background-color: red; margin: 10px auto; } .div2,.div3,.div4{ width: 170px; height: 80px; background-color: green; padding: 10px; } /*方法1*/ .div2{float: left;} .div3{float:left;margin-left:10px;} .div4{float: right;} /* 方法2 */ /* .div3{ float:left;margin:0px 10px;} .div4{float: left;} */ 清除浮动 清除浮动属性说明 【案例3.8.1】设置清除浮动样式 属性 说明 clear 功能：用来清除其之前的浮动元素对自身的影响（不同的取值，清除不同方向的浮动）。 语法：clear:none | left | right | both overflow 功能：用来设置元素处理溢出内容的方式。 语法：overflow:visible | hidden | scroll | auto 感谢观看 $