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

2021-06-03 16:54:21 字數 1155 閱讀 5745

乙個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

>

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

方法一:

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

1<

style

>

2#div1

3#div2,#div3

4style

>

方法二:

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

1<

style

>

2#div1

3#div2,#div3

4style

>

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

方法三:

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

1<

div id="

div1

">

2<

div id="

div2

">

twodiv

>

3<

div id="

div3

">

onediv

>

4<

div style="

clear:both

">

div>

5div

>

此方法新增了乙個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確不能被撐開.部分 如下 two one 如果想要撐開父元素可以採用以下方法 方法一 父元素設定overflow以及zoom,樣式如下 方法二 父元素也是設定浮動效果,樣式如下 此方法有個缺陷是,父元素的寬度需要設定。方法三 在新增乙個...

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

乙個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 如果...