1.簡單說說content內容生成

content內容生成就是通過content屬性生成內容

例如下面這個簡單的例子：

此段樣式的作用是在每個h2標簽的前面添加文字“我是額外文字”。

2.:after偽類+content 清除浮動的影響

有點經驗的同行應該知道，一般不含包裹屬性的div內部有浮動元素的話，那么這個浮動元素會讓此div的高度塌陷。如下例子：

正如文章開始提到的，IE8+和其他所有現代瀏覽器都支持:after+content，所以，對于這些瀏覽器我們可以使用:after+content方法清除浮動造成的塌陷。使用如下：
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}

其中使用content屬性設置要添加的偽類內容，使用clear清除浮動，使用overflow保證添加的偽類內容不會超出，使用visibility將填入的內容進行隱藏，使用display將元素設置為塊狀

這樣就可以讓IE8+和其他瀏覽器清除浮動破壞帶來的塌陷問題了。至于暫不支持:after偽類的IE6/IE7，我們可以使用IE私有的zoom縮放屬性讓div遠離浮動的破壞。故，雙劍合璧下就是：

這樣子，就可以實現目前所有瀏覽器的清除浮動影響的方法了。

雖然，清除浮動影響方法很多，添加包裹屬性的元素，例如：position:absolute; display:inline-block; float:left; overflow:hidden等，但是，這些所有的方法都有局限性。我個人覺得:after偽類+zoom是目前最使用的清除浮動元素影響的方法。且不產生多余的標簽，所以，我一直用它。

總結

以上是生活随笔為你收集整理的:after伪类+content内容清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。