浮動元素撐起父級元素

2021-08-08 05:28:06 字數 394 閱讀 3428

浮動會使元素脫離文件流,如果不設定父級高度,父級將失去高度,影響頁面布局。這裡總結了一些常用的方法,是父級「有高度」。

1. 設定父級高度

設定乙個合適的高度,這種方法比較適用於元素高度固定的場景。

2. 設定父級元素"overflow: hidden;"

這種方法比較簡單,但要確保父級元素沒有溢位樣式。

3. 設定父級浮動

讓父級標籤也跟著浮動,但是父級元素也將脫離文件流。

4. 新增乙個子元素,清除浮動「clear: both;」

在最後乙個浮動元素後面新增乙個空的塊級元素,清除浮動

5. 使用:after偽元素選擇器,選擇父級,改方法同方法4相似

.father:after

解決浮動元素父級塌陷問題

坍塌原因 當父級元素沒有設定高度時,當子元素浮動後,子元素會脫離文件流,而父級元素的高度不會像在普通文件流中一樣被內容撐開,此時,它是不能被撐開的,會對後續的布局結構造成很多困擾。解決方法 clear both div clear取值 left 清除左浮動 right 清除右浮動 both 清除所有...

父級元素與子集元素浮動影響的解決

style box box1 box2 style body div class box div class box1 div1 div div class box2 div2 div div body 先看現在的效果 將div1和div2進行左浮動,會發現 父級元素不見了,因為div1和div2脫...

父元素浮動子元素會浮動嗎 13浮動

1 浮動的定義 float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。css 的 float 浮動 使元素脫離文件流,按照指定的方向 左或右發生移動 直到它的外邊緣碰到包含框或...