网页基本布局：常见网页布局、标准文档流
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列 文档流：元素默认是根据自身特性排列的，及标准文档流 设置浮动后元素会脱离文档流 组成 块级元素（block） <h1>…<h6>、<p>、<div>、列表… 内联元素（inline） <span>、<a>、<img/>、<strong>... $注释: 内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立 display属性 **** 值 说明 block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 none 设置元素不会被显示 示例：display:block; display:inline; display:inline-block; display:none; display特性：块级元素与行级元素的转变（block、inline） 控制块元素排到一行（inline-block） 控制元素的显示和隐藏（none）
浮动 ----- float
所以综上所述，浮动具有以下特点：
1）破坏了流式布局
2）块级元素浮动后具有包裹性
3）让行级元素浮动后变成了块级元素
float属性
属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其文本中出现的位置
案例：
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
</body>
</html>
示例.layer01 { .layer01 {
border:1px #F00 dashed; border:1px #F00 dashed;
float:left; float:right;
} }
.layer02 { .layer02 {
border:1px #00F dashed; border:1px #00F dashed;
float:left; float:right;
} }
清除浮动 ------ clear属性
clear属性
值 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
使用这个属性，要求元素必须是块级的。
使用方法:1、给父元素添加一个空的块级元素，
2、不让这个空的块级元素浮动，并给他添加clear：both；
示例：img {
clear:both; //清除两侧浮动
}
clear:left; //清除左浮动 clear:right; //清除右浮动
解决父级边框塌陷的方法
解决父级边框塌陷的方法： ***** 浮动元素后面加空div 设置父元素的高度 父级添加overflow属性 父级添加伪类after,清除浮动clear overflow属性 属性值 说明 visible 默认值。内容不会被修剪，会呈现在盒子之外 *** hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
清除浮动，防止父级边框塌陷的四种方法 浮动元素后面加空div：空div会造成HTML代码冗余 .clear{ clear: both; margin: 0; padding: 0;} <div id="father"> <div class="layer01"> <img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"> <img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"> <img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> <div class="clear"></div> </div> 设置父元素的高度：固定高度会降低元素可扩展 #father {height: 400px; border:1px #000 solid; } <div id="father"> <div class="layer01"> <img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"> <img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"> <img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> 父级添加overflow属性：有下拉列表框场景不能用 #father {overflow: hidden; border:1px #000 solid; } <div id="father"> <div class="layer01"> <img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"> <img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"> <img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> 父级添加伪类after：没有副作用，推荐使用 .clear:after{ content: ''; display: block; clear: both; } <div id="father" class="clear"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div>