有写过浮动的人在没有学习清除浮动的时候，都会有这样一种体会，比如说，有两个div，我想把它放到一行，然后选择用浮动来达到自己想要的效果。接下来在写正常文档流的时候，就会发现出现问题，浮动后的正常文档流会在浮动元素的底部显示，浮动元素会把正常元素覆盖掉。。。
如图2（两个浮动的div都是左浮动）图4（两个浮动的div一个是左浮动一个是右浮style="clear:right即可”)。这个bug解决后，所呈现的效果如浮动清除效果1/2所示。
清除浮动的方法
1.给父元素加高度
2.（1）给浮动的元素加一个兄弟空的元素，并加上样式clear:both/cleat:left/clear right
（2）给父元素加伪类：
如：.box:after{
content:””;
display:block;
clear:both;
}
（3）给受影响的元素加样式：clear:both/cleat:left/clear right
3.给浮动元素的父元素加上：overflow：hidden
图1
图2
图3
图4
清除浮动第一种方法1
清除浮动的效果1
清除浮动第一种方法2
清除浮动效果2
网友评论