解決子元素的浮動導致的父元素高度坍塌的問題

2022-07-25 18:00:15 字數 1200 閱讀 3724

參考:

當父元素中的子元素設定了float屬性時,可認為子元素就跳出了父元素的束縛而位於新的一層,此時父元素內部沒有元素,其高度就變為0。要解決這個問題,人為給父元素設定高度是不現實的,因為一般父元素的高度是由子元素決定的,為此我們可以從父子元素兩個角度出發,用兩種思路解決這個問題。

1. 子元素角度:新增乙個新的子元素,並對其設定 clear:both;

2. 父元素角度:對父元素新增樣式 display:  inline-block 或者 overflow: hidden

例項**如下:

<

style

>

.father-box

.box1

.box2

.box3

.words

.box4

.uncle-box

style

>

head

>

<

body

>

<

div

class

="father-box"

>

<

div

class

="box1"

>

div>

<

div

class

="box2"

>

div>

<

div

class

="box3"

>

div>

<

div

class

="words"

>aaaaa

div>

div>

<

div

class

="uncle-box"

>

div>

body

>

設定前                                                 設定後

CSS子元素浮動導致父元素高度塌陷問題

根據w3c標準,在頁面中元素都有乙個隱含的屬性叫做 block formatting context,簡稱 bfc,該屬性可以設定開啟或者關閉,預設是關閉的。當開啟元素的bfc以後,元素會具有以下特性 1.父元素的垂直外邊距不會和子元素重疊 2.開啟 bfc 的元素不會被浮動元素覆蓋 3.開啟 bf...

解決子元素浮動,父元素高度變小的問題

當子元素浮動時,脫離了文件流,不佔據原來的頁面空間,使父元素的高度變小,甚至為0,我們可以通過幾種方式來解決這個問題。解決辦法如下 1.設定父元素的overflow為hidden。缺點 把本應該顯示的元素隱藏。2.在知道父元素本應該是多高的情況下,設定父元素的高度。缺點 不知道父元素高度的不適合。3...

float浮動導致父元素坍塌

今天遇到了乙個情況,給子元素指定浮動之後,父元素的背景顏色就消失了。原來是這個樣子的,然後我希望裡面的li元素變為浮動。於是.head li 我發現父元素變形了。原來之前父元素的高度是被子元素撐開的,現在子元素變成浮動了,父元素就沒法被撐開了。1 把父元素也改為浮動 但是 這樣會影響到布局。2 給父...