溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“子Div使用Float后撐開父Div的方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
一個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>
如果想要撐開父元素可以采用以下方法：
方法一：
父元素設置overflow以及zoom，樣式如下：
代碼如下:
<style>
#div1{border:1px solid red;overflow:hidden;zoom:1;}
#div2,#div3{float:right;border:1px solid blue;}
</style>
方法二：
父元素也是設置浮動效果，樣式如下：
代碼如下:
<style>
#div1{border:1px solid red;float:left;}
#div2,#div3{float:right;border:1px solid blue;}
</style>
此方法有個缺陷是，父元素的寬度需要設置。
方法三：
在添加一個子元素，并設置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的方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
