簡述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製作登入框

以上是簡述CSS中clearfix 的原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！