css清除浮動(css 解決浮動元素引起的高度問題)
阿新 • • 發佈:2019-02-16
首先了解兩個概念:
- 文件流:文件流是文件中可顯示物件在排列時所佔用的位置。
- 浮動的定義:使元素脫離文件流,按照指定方向發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。
浮動的實際用途,可設定文字環繞或使元素寬度由內容填充(類似Inline-block)。使用浮動需要注意的是如果浮動的元素高度比父級容器還高,那麼需要設定父級容器的overflow
屬性為auto
,使其自動撐滿。
本人經常使用的清除浮動是使用以下這種(目前主流,可以把該樣式封裝在全域性,供一整個專案複用)
選擇符:after{
content:"";
clear:both;
display:block;
}
也有寫法把content設定為不為空
以上方法,未考慮ie6-7這老掉渣的版本(IE6,7下不相容 after偽類),相容方法新增如下樣式
選擇符{zoom:1;}
zoom:1; // 觸發 IE下 haslayout,使元素根據自身內容計算寬高
其他一些方法羅列(不齊全)
1、給父容器一個確定的高度
2、手動新增一個空div,並設定樣式{clear:both;}的
3、父元素增加樣式overflow:auto;