初学者要get到的清除浮动的方法

有写过浮动的人在没有学习清除浮动的时候，都会有这样一种体会，比如说，有两个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