清除元素浮动的方法

一、为什么要清除浮动
父元素没有设置高或者高设置为auto或者父元素的高度小于子元素高度时，子元素若浮动即脱离文本流（这时无论你怎么调子元素的高度，父元素的高度都不会有变化），父元素高度就会出现所谓的坍缩（即高度为0或者为你设置的高度），这可能会影响页面下面的布局，所以在设置了浮动后要清除浮动。
二、清除浮动的方法
1、用overflow：hidden 清除浮动：
在子元素设置浮动后，如果父元素没有设置高度或者高度为auto时，可在父元素的css里设置overflow：hidden，这时父元素高度会自动撑开。
但这个方法仅限于父元素没有高度或者高度为auto的时候。因为overflow：hidden还有一个意思是超出部分隐藏（即如果你设置了父元素的高度，且父元素的高度小于子元素高度，那么子元素超出父元素的部分会被隐藏）。

2.用clear清除浮动：
clear的用法官方解释为“元素盒子的边不能和前面的浮动元素相邻”。怎么理解呢？clear很善良，它只会让自己离开不会让他周围的元素离开。举个栗子：比如：clear：left，因为左边有浮动元素，它不会改变左边的浮动元素，所以只能自己离开左边的浮动元素，换到下一行，这样他的左边就不会有浮动元素了。
要想使父元素撑开，设置clear的元素就不能浮动。
清除方法是：
内部标签：在子元素同级添加空标签，然后在css设置clear：both，这样会是父元素的高度撑开。
外部标签：在父元素同级添加空标签，然后css设置clear：both，这样会将浮动盒子的影响清除，但是父元素不会撑开。
（不建议使用这种方法，因为这样会增加没有必要的空标签）
3.使用伪元素after来清除浮动
给父元素添加伪元素
如下：

为兼容IE6,IE7，因为ie6,ie7不能用after伪类。需要在父元素里加上下面代码zoom：1；



 

    

    

尽量使用这种方法
4.双伪类清除浮动

.a:before,.a:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .a{

                  zoom: 1;

            }

此方法不严谨，不推荐使用