css清除浮動的四種方式,看看你都會嘛?

主頁 > 成長 >

張兵 次瀏覽

摘要:做前端開發咱們都不得不運用float起浮特點,可是如果運用了起浮,難免會遇到父級元素不能自適應高度。 假設了有三個盒子目標,一個父級里包含了兩個子級,父級元素沒有設置固定

做前端開發咱們都不得不運用float起浮特點,可是如果運用了起浮,難免會遇到父級元素不能自適應高度。

 

假設了有三個盒子目標,一個父級里包含了兩個子級,父級元素沒有設置固定高度,子級一個運用了float:left(左起浮)特點,別的一個子級運用float:right(右起浮)特點,這種情況的話父級元素的高度就必定不能被子內容而撐開。

如圖:

(三個盒子目標)

(設置了起浮以后,父級元素不能被撐開)

(咱們所期望的作用)

 

這種情況在咱們的工作中特別多見,咱們能夠經過四種辦法鏟除起浮,

辦法一:運用一個空標簽

看看css特點


辦法二:給父元素設置display:inline-block特點

辦法三:給父元素設置overflow:auto或hidden特點

辦法四:使用css偽類(對比常用,例如bootstrap結構運用的即是這種辦法)

將.clearfix這個類加入到需求鏟除起浮的父級元素

例如

 

 

 

好啦以上即是鏟除起浮的幾種辦法,不知道童鞋你學會了么?

隨機新聞
急速赛车收