1.簡單說說content內(nèi)容生成

content內(nèi)容生成就是通過content屬性生成內(nèi)容

例如下面這個(gè)簡單的例子：

此段樣式的作用是在每個(gè)h2標(biāo)簽的前面添加文字“我是額外文字”。

2.:after偽類+content 清除浮動(dòng)的影響

有點(diǎn)經(jīng)驗(yàn)的同行應(yīng)該知道，一般不含包裹屬性的div內(nèi)部有浮動(dòng)元素的話，那么這個(gè)浮動(dòng)元素會(huì)讓此div的高度塌陷。如下例子：

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

其中使用content屬性設(shè)置要添加的偽類內(nèi)容，使用clear清除浮動(dòng)，使用overflow保證添加的偽類內(nèi)容不會(huì)超出，使用visibility將填入的內(nèi)容進(jìn)行隱藏，使用display將元素設(shè)置為塊狀

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

這樣子，就可以實(shí)現(xiàn)目前所有瀏覽器的清除浮動(dòng)影響的方法了。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。