簡述CSS中clearfix 的原理

這次給大家帶來簡述CSS中clearfix 的原理，使用CSS中clearfix的注意事項有哪些，下面就是實戰案例，一起來看一下。

Demo
Demo中的CSS中用到這樣一個樣式:

.clearfix:after{  content: '';  display: block;  clear: both;

該樣式通過::after選取器在選擇元素之後插入content: ''單引號中的內容，該內容不可被選定，例子中中插入內容為空白。對這個空元素添加clear:both，使其清除浮動。相當於在內容末尾添加一個空的div，然後清除浮動。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS的選取器有哪些常見問題

CSS常見樣式

深入分析JS函數

怎樣用CSS3製作登入框