這篇文章給大家分享的是有關(guān)HTML中子div設(shè)置float后會導(dǎo)致父div無法自動撐開怎么辦的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)，品牌網(wǎng)站制作，廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破上千,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

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

以下是幾種解決辦法（假設(shè)父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;/*讓主要內(nèi)容區(qū)隨內(nèi)容自動撐開*/
    overflow-y:hidden;/*把出現(xiàn)的滾動條隱藏，但是底下會被遮到一點(diǎn)，不完美*/
     _height:1%;/*對IE的hack*/
}

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

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

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

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

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

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

感謝各位的閱讀！關(guān)于HTML中子div設(shè)置float后會導(dǎo)致父div無法自動撐開怎么辦就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享文章：HTML中子div設(shè)置float后會導(dǎo)致父div無法自動撐開怎么辦
URL地址：http://aaarwkj.com/article16/gpgddg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、商城網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)