如何解決子div設定float後會導致父div無法自動撐開的問題

本篇文章分享給大家的內容是關於子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; 也可以

## 相關推薦：

tinymce與prism實現高亮的程式碼以及漢化的配置方法過程

如何動態產生html元素以及為元素追加屬性的方法介紹（附程式碼）

以上是如何解決子div設定float後會導致父div無法自動撐開的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！