子Div使用Float后撐開父Div的方法有哪些

本篇內(nèi)容介紹了“子Div使用Float后撐開父Div的方法有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一個Div包含了多個子Div，并且子Div使用了浮動后，父Div確不能被撐開，如下圖：
 
部分代碼如下：

代碼如下:

<style>
#div1{border:1px solid red;float:left;}
#div2,#div3{float:right;border:1px solid blue;}
</style>
<div id="div1">
<div id="div2">two</div>
<div id="div3">one</div>
</div>

如果想要撐開父元素可以采用以下方法：

方法一：

父元素設(shè)置overflow以及zoom，樣式如下：

代碼如下:

<style>
#div1{border:1px solid red;overflow:hidden;zoom:1;}
#div2,#div3{float:right;border:1px solid blue;}
</style>

方法二：

父元素也是設(shè)置浮動效果，樣式如下：

代碼如下:

<style>
#div1{border:1px solid red;float:left;}
#div2,#div3{float:right;border:1px solid blue;}
</style>

此方法有個缺陷是，父元素的寬度需要設(shè)置。

方法三：

在添加一個子元素，并設(shè)置clear樣式：

代碼如下:

<div id="div1">
<div id="div2">two</div>
<div id="div3">one</div>
<div ></div>
</div>

此方法添加了一個div元素，有些情況下可能這個div會影響元素的遍歷。

以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 下測試通過，其他瀏覽器沒有測試。

“子Div使用Float后撐開父Div的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！