标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列
文档流：元素默认是根据自身特性排列的，及标准文档流
设置浮动后元素会脱离文档流
组成 块级元素（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>