浮动的清除

为什么要清除浮动

• 浮动后的元素不会撑开父元素的高度，因为浮动是不占位置的。
• 清除浮动所带来的影响，并不是真正的清除浮动。

如何清除浮动

1. 额外标签法：在浮动元素的后边加上标签
1. <div style="clear: left;"></div>    
2. 清除左浮动 clear: left
3. 清除右浮动 clear: right
4. 清除左右浮动 clear: both  
5. 优点：通俗易懂，书写方便
6. 缺点：添加了额外的标签，结构化差
2. overflow 属性：在父元素中添加
1. overflow: hidding;
2. overflow:scroll;
3. overflow:auto;
4. 优点：代码简洁
5. 缺点：盒子中多余的内容会被隐藏掉
3. 使用 after 伪元素清除浮动：在父元素中添加
1.   .____::after { content:' ';display:block;clear:both;}
2. 优点：符合闭合浮动思想、结构语义话正确
3. 缺点：IE6-7 不支持 :after
4. 双伪元素清除浮动：给父元素添加 after 以及 before 伪元素
1.   .____::after, .____::before { content: ' ';display: table;clear: both;}
2. 优点：代码简洁
3. 缺点：IE6-7 不支持 :after