子Div使用Float後如何撐開父Div

2021-08-26 16:41:24 字數 1269 閱讀 9275

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開,如下圖:

部分**如下:

1 <

style

>

2 #div1

3 #div2,#div3

4 style

>

5 6

<

div id

= "

div1

">

7 <

div id

= "

div2

">

twodiv

>

8 <

div id

= "

div3

">

onediv

>

9 div>

如果想要撐開父元素可以採用以下方法:

方法一:

父元素設定overflow以及zoom,樣式如下:

1 <

style

>

2 #div1

3 #div2,#div3

4 style

>

方法二:

父元素也是設定浮動效果,樣式如下:

1 <

style

>

2 #div1

3 #div2,#div3

4 style

>

此方法有個缺陷是,父元素的寬度需要設定。

方法三:

在新增乙個子元素,並設定clear樣式:

1 <

div id

= "

div1

">

2 <

div id

= "

div2

">

twodiv

>

3 <

div id

= "

div3

">

onediv

>

4 <

div style

= "

clear:both

">

div>

5 div>

此方法新增了乙個div元素,有些情況下可能這個div會影響元素的遍歷。

以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 transitional 在ff ie6 ie7 ie8 下測試通過,其他瀏覽器沒有測試。

子DIV使用float後撐不開父DIV的問題

2011 04 16 12 21 19 分類 css 標籤 divheight 撐開ie6 auto 舉報 字型大小訂閱 子div使用float後不撐開父div的問題。方法出處,但是之間的區別是我自己總結的 背景 ie6父div不管加不加height,指不指定固定的height都可以自動撐開的。ie...

子Div使用Float後如何撐開父Div

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開,如下圖 部分 如下 1 style 2 div1 3 div2,div3 4style 56 div id div1 7 div id div2 twodiv 8 div id div3 onediv 9div 如果想要撐...

子Div使用Float後如何撐開父Div

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開.部分 如下 two one 如果想要撐開父元素可以採用以下方法 方法一 父元素設定overflow以及zoom,樣式如下 方法二 父元素也是設定浮動效果,樣式如下 此方法有個缺陷是,父元素的寬度需要設定。方法三 在新增乙個...