CSS清除浮動(dòng)是開(kāi)發(fā)中常用的一種技巧,它可以解決以下問(wèn)題:
1. 父元素高度無(wú)法自適應(yīng)。
2. 擺放在浮動(dòng)元素后面的元素位置不正確。
具體說(shuō)來(lái),當(dāng)一個(gè)元素浮動(dòng)之后,它將脫離文檔流,浮到父元素的左側(cè)或右側(cè),父元素高度無(wú)法自適應(yīng),影響子元素的布局。
div{ border:1px solid red; overflow:hidden; /*清除浮動(dòng)的關(guān)鍵*/ } div .left{ float:left; width:50%; } div .right{ float:right; width:50%; }
以上是利用了overflow屬性的hack清除浮動(dòng)的方法。
還有一種常用的清除浮動(dòng)方式是添加.clearfix類(lèi):
.clearfix::after{ content:""; display:block; clear:both; }
如需清除浮動(dòng),只需在父元素上添加.clearfix類(lèi)即可:
以上就是清除浮動(dòng)的兩種常用方式,大家可以自行選擇合適的方式使用。