css中清除浮动的几种方法汇总好方法坏方法都有

浮动的最初目的是让文字可以环绕在图片周围，后来浮动才被用到了布局当中，当使用福东时，往往会产生一些副作用，如父元素塌陷，元素重叠等，清除浮动就是为了消除这些副作用。
首先我们来了解浮动的原理，通过设置浮动，元素脱离文档流，其父元素如果没设置宽高就会塌陷，其他文本和行内元素会环绕它，浮动后的display属性也会发生变化，他不在是一个行内元素，可以对其设置宽高，浮动类型分为左浮动left 有浮动right，

第一种方法 额外标签法
利用float：left/right/both来清除浮动
原理就是添加该属性的元素在左边右边或所有方位不会出现浮动元素。
所以可以在浮动元素后添加一个空的div’再对其进行设置css属性float：bioth

第二种方法 伪元素法
当浮动元素造成父级元素塌陷的时候，可以利用在他后面加上后元素清除浮动的方式，但这种方法不优雅，此时采用给父元素加一个类clearfix，再需要清除浮动的时候再父元素后面添加一个为元素，对为元素进行清除浮动
.clearfix：：after {content：“”
clear：bith；
display：block；
}

第三种方法 给父元素添加overflow’属性
此方法属于偏方，因为该属性初衷不是为了清除浮动，而是而是为了滚动条设置而添加的属性。
给父元素的属性添加一个overflow：hidden；
一般的元素如果没有设置overflow，系统一般默认为overflow：auto，这时候我们把他改成overflow：hidden；
如果该元素有position属性，不建议使用，因为hidden会隐藏出去超出边界的内容。

第四种方法 双伪元素法
给父元素添加一个类 clearfix
.clearfix::before，clearfix::after {content:"";
diaplay:table;
}
.clearfix::after{clear:both;}
.clear::before(
*zoom:1;}

上面四种方案是实践中用的最多的，此外还有其他几种方案，
4 给父元素添加高度，这个方法不建议使用。
父元素一起浮动，不推荐使用
父元素的display改成display：table
或者position：fixed