溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關HTML中子div設置float后會導致父div無法自動撐開怎么辦的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
原因：內部的p因為float:left之后，就丟失了clear:both和display:block的樣式，所以外部的p不會被撐開。
以下是幾種解決辦法（假設父p的class為“container”）:
方法1、使用偽類
container::after{
display: block;
height:0;
content: '';
clear: both;
}
container{
display: inline-block; /*第一種撐開辦法，底下會有部分被遮到，所以添加這行，就完美了*/
}方法2、不撐開的原理是overflow不可見，所以給父p添加overflow:auto;就行，IE要用_height:1%;
container{
overflow: auto;/*讓主要內容區隨內容自動撐開*/
overflow-y:hidden;/*把出現的滾動條隱藏，但是底下會被遮到一點，不完美*/
_height:1%;/*對IE的hack*/
}方法3、可以專門最后添加一個子p用來清除浮動：<p class="clear"></p>
設置樣式.clear{clear:both; font-size:0; height:1%;}
方法4、可以設置父p的高度（也就是手動撐開，不靈活）；
方法5、直接給父p設置 display: inline-block; 這樣也自動撐開
方法6、直接給子p設置 display: inline-block; 也能自動撐開，但是排版問題有待研究學習
方法7、從網上還發現了一種方法，給父p增加屬性：display:table;
方法8、 子p浮動我就套不住你?OK,我讓父p也浮動: 父p設置 float: left; 也可以
感謝各位的閱讀！關于HTML中子div設置float后會導致父div無法自動撐開怎么辦就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
