這篇文章主要介紹了詳解css清除浮動float的七種常用方法總結和相容性處理,非常具有實用價值,需要的朋友可以參考下
在清除浮動前我們要瞭解兩個重要的定義:
浮動的定義:使元素脫離文檔流,按照指定方向發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。
高度塌陷:浮動元素父元素高度自適應(父元素不寫高度時,子項目寫了浮動後,父元素會發生高度塌陷)
知道浮動和為什麼要清除浮動之後我們可以開始學習如何清除浮動了,這時候我們就需要用到清除浮動的屬性clear,
clear:left | right | both | none | inherit:元素的某個方向上不能有浮動元素
clear:both:在左右兩側均不允許浮動元素。
具體清楚浮動的方法主要一下幾種:
1、clear清除浮動(添加空p法)
在浮動元素下方添加空p,並給該元素寫css樣式:
{clear:both;height:0;overflow:hidden;}
2、方法:給浮動元素父級設定高度
我們知道了高度塌陷是應為給浮動元素的父級高度是自適應導致的,那麼我們給它的設定適當的高度就可以解決這個問題了。
缺點:在浮動元素高度不確定的時候不適用
3、方法:以浮制浮(父級同時浮動)
何謂“以浮制浮”呢?就是**讓浮動元素的父級也浮動**。
缺點:需要給每個浮動元素父級添加浮動,浮動多了容易出現問題。
4、方法:父級設定成inline-block
缺點:父級的margin左右auto失效,無法使用margin: 0 auto;置中了
5、 br 清浮動
<p class="box"> <p class="top"></p> <br clear="both" /></p>
br 標籤內建clear屬性,將它設定成both其實和添加空p原理是一樣的。
問題:不符合工作中:結構、樣式、行為,三者分離的要求。
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 不支援;