7種清除浮動 (感覺br最好用然而我用的還是overflow)
阿新 • • 發佈:2018-12-21
1、clear清除浮動(新增空div法)
在浮動元素下方新增空div,並給該元素寫css樣式: {clear:both;height:0;overflow:hidden;}
2、方法:給浮動元素父級設定高度
我們知道了高度塌陷是應為給浮動元素的父級高度是自適應導致的,那麼我們給它的設定適當的高度就可以解決這個問題了。
缺點:在浮動元素高度不確定的時候不適用
3、方法:以浮制浮(父級同時浮動)
何謂“以浮制浮”呢?就是**讓浮動元素的父級也浮動**。
缺點:需要給每個浮動元素父級新增浮動,浮動多了容易出現問題。
4、方法:父級設定成inline-block
缺點:父級的margin左右auto失效,無法使用margin: 0 auto;居中了
5、 br 清浮動
<div class="box">
<div class="top"></div> <br clear="both" /> </div>
br 標籤自帶clear屬性,將它設定成both其實和新增空div原理是一樣的。
問題:不符合工作中:結構、樣式、行為,三者分離的要求。
6、給父級新增overflow:hidden 清浮動方法;
問題:需要配合 寬度 或者 zoom 相容IE6 IE7;
overflow: hidden;
*zoom: 1;
7、萬能清除法 after偽類
選擇符:after{
content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; }
同時為了相容 IE6,7 同樣需要配合zoom使用例如:
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;}
需要注意的東西:
after偽類: 元素內部末尾新增內容; :after{content"新增的內容";} IE6,7下不相容 zoom 縮放 a、觸發 IE下 haslayout,使元素根據自身內容計算寬高。 b、FF 不支援;