清除浮動最有效的css寫法
說起來呢，基本上只要你給容器div加了float的屬性，就需要清除浮動來使頁面顯示正常，那麽，到底有什麽方法可以讓浮動輕松清除呢？
可以用display：flex;替代，但是它對IE8，9支持不是很好，所以不怎麽這麽用。
1.在容器div的裏面結束標記之前寫如下這樣的div這段代碼：
<div style="clear:both"></div>
雖然通俗易懂，容易掌握，但是在頁面中加入了一個無意義的空標簽，違背了結構和表現分離的web標準的精髓，如果頁面空標簽多的話，對於後期的維護會造成一定的困難。一般來說，現在已經不采用這種方法。
2.在浮動容器div的css樣式中加入overflow屬性。
3.將父元素也變成浮動元素，但是影響整個頁面的布局，不推薦使用。
4.使用:after偽元素，一般增加clearfix的class，大概寫法如下：
.clearfix:after{
content:".";/*加一段內容*/
display:block;/*讓生成的元素以塊級元素顯示，占滿剩余空間*/
height:0;/*避免生成的內容破壞原有布局高度*/
clear:both;/*清除浮動*/
visibility:hidden;/*讓生成的內容不可見*/
}
.clearfix{zoom:1;/*為IE6，7的兼容性設置*/}
除了clear:both;是為了清除浮動以外，其他的屬性就是為了隱藏這個元素，所以我們對它進行了改進一下：
.clearfix:after,.clearfix:before{
content:".";/*加一段內容*/
display:table;/*創建匿名的表格單元，觸發bfc*/
}
.clearfix:after{
clear:both;/*清除浮動*/
}
.clearfix{zoom:1;/*為IE6，7的兼容性設置*/}
.clearfix:before，加上before，對清除浮動沒什麽作用，防止瀏覽器頂部空白崩潰，也就是說，margin-top和上一個盒子的margin-bottom它們會發生一個疊加，這麽做就是防止疊加，其實沒有這個需要，去掉before也沒啥問題。
原理和第一種方法差不多，就是用clear:both;
使用的原理基本上就是觸動bfc，
bfc：block formating contexts 塊級格式化上下文
比如下面這些就是：
float：left;
overflow：auto;
display：table-cell;
display:table-caption;
display:inline-block;
position:fixed;
position:absolute;
目前就是用最後的一種方式來進行清除浮動，畢竟優雅~~~
原文地址：https://blog.csdn.net/u012396955/article/details/60341523
清除浮動最有效的css寫法