如何處理子div設(shè)置float后會(huì)導(dǎo)致父div無法自動(dòng)撐開的問題

原因：內(nèi)部的p因?yàn)閒loat:left之后，就丟失了clear:both和display:block的樣式，所以外部的p不會(huì)被撐開。

以下是幾種解決辦法（假設(shè)父p的class為“container”）:

• 方法1、使用偽類

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一種撐開辦法，底下會(huì)有部分被遮到，所以添加這行，就完美了*/
}

• 方法2、不撐開的原理是overflow不可見，所以給父p添加overflow:auto;就行，IE要用_height:1%;

container{
    overflow: auto;/*讓主要內(nèi)容區(qū)隨內(nèi)容自動(dòng)撐開*/
    overflow-y:hidden;/*把出現(xiàn)的滾動(dòng)條隱藏，但是底下會(huì)被遮到一點(diǎn)，不完美*/
     _height:1%;/*對IE的hack*/
}

• 方法3、可以專門最后添加一個(gè)子p用來清除浮動(dòng)：<p class="clear"></p>
  設(shè)置樣式.clear{clear:both; font-size:0; height:1%;}

• 方法4、可以設(shè)置父p的高度（也就是手動(dòng)撐開，不靈活）；

• 方法5、直接給父p設(shè)置 display: inline-block; 這樣也自動(dòng)撐開

• 方法6、直接給子p設(shè)置 display: inline-block; 也能自動(dòng)撐開，但是排版問題有待研究學(xué)習(xí)

• 方法7、從網(wǎng)上還發(fā)現(xiàn)了一種方法，給父p增加屬性：display:table;

• 方法8、 子p浮動(dòng)我就套不住你?OK,我讓父p也浮動(dòng): 父p設(shè)置 float: left; 也可以

相關(guān)推薦：

tinymce與prism實(shí)現(xiàn)高亮的代碼以及漢化的配置方法過程

如何動(dòng)態(tài)生成html元素以及為元素追加屬性的方法介紹（附代碼）

以上就是如何解決子div設(shè)置float后會(huì)導(dǎo)致父div無法自動(dòng)撐開的問題的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！