css怎么解決浮動(dòng)導(dǎo)致父元素高度坍塌-創(chuàng)新互聯(lián)

這篇“css怎么解決浮動(dòng)導(dǎo)致父元素高度坍塌”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“css怎么解決浮動(dòng)導(dǎo)致父元素高度坍塌”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。

10多年的豐臺(tái)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整豐臺(tái)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“豐臺(tái)網(wǎng)站設(shè)計(jì)”,“豐臺(tái)網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一、文檔流與浮動(dòng)

1、’什么是文檔流？

在html中，文檔流也可以叫做標(biāo)準(zhǔn)流或普通流。元素的顯示方式是自上而下，從左到右，其中，塊級(jí)元素默認(rèn)占據(jù)一行，行內(nèi)或行內(nèi)塊級(jí)元素只占據(jù)內(nèi)容部分或自身的所占據(jù)的部分，并不會(huì)像塊級(jí)元素一樣霸道的占據(jù)一行，其實(shí)這也跟自然現(xiàn)象中的瀑布自上而下流動(dòng)是一個(gè)道理^_^。

2、不安分的浮動(dòng)

在上面我們已經(jīng)初步了解了文檔流，但是元素在網(wǎng)頁(yè)中的顯示僅僅依靠文檔流是不夠的，就比如說(shuō)天貓商城的商標(biāo)導(dǎo)航部分，無(wú)序列表ul的每個(gè)列表項(xiàng)li是塊級(jí)元素（display:list-item）,按照文檔流來(lái)說(shuō)，塊級(jí)元素是占據(jù)一行的，所以每個(gè)li會(huì)自上而下一行行顯示，但實(shí)際上每個(gè)li卻只占據(jù)了自身的部分，請(qǐng)看下圖：

那么為什么這些li元素不按照文檔流的方式顯示，原因就是他們已經(jīng)脫離了文檔流。想讓一個(gè)元素脫離文檔流，方法有兩種：第一種是浮動(dòng)（float）;第二種就是定位（position）。
如果說(shuō)，文檔流是別人家做什么事都聽(tīng)父母的話，是個(gè)很乖很懂事的孩子，嘿嘿，那么浮動(dòng)就是自家做什么事都不聽(tīng)話，不安分的孩子。就像我們小時(shí)候，父母經(jīng)常對(duì)我們說(shuō)你看看別人家孩子多么多么聽(tīng)話，你再看看你，怎么怎么樣…

二、浮動(dòng)是把雙刃劍

既然浮動(dòng)已經(jīng)讓元素脫離了文檔流，那么我們就可以讓元素的顯示更為靈活，比如簡(jiǎn)易導(dǎo)航欄的制作：

 body{
        margin:0;
        background-color:#333;
    }
    ul{
        list-style:none;
        width:500px;
        margin:100px auto 0;
        padding:0;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    ul li{
        float:left;
        width:100px;
        height:30px;
        background-color:#fff;
    }
    ul li a{
        display:block;
        height:100%;
        line-height:30px;
        color:#000;
        text-decoration:none;
        text-align:center;
    }

 <ul class="nav clearfix">
        <li>
            <a href="">導(dǎo)航1</a>
        </li>
        <li>
            <a href="">導(dǎo)航2</a>
        </li>
        <li>
            <a href="">導(dǎo)航3</a>
        </li>
        <li>
            <a href="">導(dǎo)航4</a>
        </li>
        <li>
            <a href="">導(dǎo)航5</a>
        </li>
    </ul>

又比如早之前的圣杯布局

   body{
        margin:0;
    }
    .wrap{
        padding:0 300px;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .middle,.left,.right{
        float:left;
        position:relative;
        height:100px;
    }
    .middle{
        width:100%;
        background-color:#333;
    }
    .left{
        left:-300px;
        width:300px;
        margin-left:-100%;
        background-color:#ccc;
    }
    .right{
        right:-300px;
        width:300px;
        margin-left:-300px;
        background-color:#f00;
    }

  <div class="wrap clearfix">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

同時(shí)，浮動(dòng)也會(huì)帶來(lái)其他的影響，比如，浮動(dòng)的元素會(huì)覆蓋后面處于文檔流中的元素，

  body{
        margin:0;
    }
    .box-1{
        float:left;
        width:200px;
        height:200px;
        background-color:#333;
    }
    .box-2{
        width:200px;
        height:300px;
        background-color:#ccc;
    }

 <div class="box-1"></div>
    <div class="box-2"></div>

為了解決上面這種問(wèn)題，我們只要給BOX-2清除浮動(dòng)就行了

  .box-2{
        clear:both;
        width:200px;
        height:300px;
        background-color:#ccc;
    }

此外，浮動(dòng)元素會(huì)導(dǎo)致父元素高度坍塌，如果一個(gè)沒(méi)有高度的塊級(jí)元素的子元素浮動(dòng)的話，則這個(gè)塊級(jí)父元素的高度為0，請(qǐng)看如下代碼：

   body{
        margin:0;
    }
    .box-1{
        width:300px;
        background-color:#333;
    }
    .box-2{
        float:left;
        width:200px;
        height:300px;
        background-color:#ccc;
    }

  <div class="box-1">
        <div class="box-2"></div>
    </div>

大家應(yīng)該知道，對(duì)于一個(gè)元素來(lái)說(shuō)，不給他固定高度的時(shí)候他的高度是由內(nèi)容撐開(kāi)的，也就是說(shuō)，如果這個(gè)元素里面沒(méi)有任何內(nèi)容，他的高度就是0，當(dāng)這個(gè)元素有內(nèi)容的時(shí)候，他就有了高度（也就是內(nèi)容的高度），請(qǐng)看下圖：

 .box-1{
        width:100px;
        background-color:#f00;
    }

<div class="box-1"></div>

<div class="box-1">我是內(nèi)容</div>

而在上面中父元素BOX-1雖然有了子元素BOX-2，但是他的高度卻為0，這到底是怎么回事呢？就是因?yàn)锽OX-2浮起來(lái)了，子元素BOX-2和父元素BOX-1不在同一高度，從而BOX-1無(wú)法包裹住BOX-2，請(qǐng)看下圖：

上圖就是浮動(dòng)帶來(lái)的父元素高度坍塌問(wèn)題

三、如何解決浮動(dòng)帶來(lái)的父元素高度坍塌問(wèn)題

1、子級(jí)方法

在子元素的最后添加一個(gè)高度為0的子元素，并且讓他清除浮動(dòng)，請(qǐng)看一下代碼：

   body{
        margin:0;
    }
    .box-1{
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }
    .box-3{
        clear:both;
    }

<div class="box-1">
        <div class="box-2"></div>
        <div class="box-3"></div>
    </div>

效果圖如下，紅色盒子是父元素，黃色盒子是子元素BOX-2

2、父級(jí)方法

給父元素設(shè)置display:inline-block;
代碼如下：

  body{
        margin:0;
    }
    .box-1{
        display:inline-block;
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }

 <div class="box-1">
        <div class="box-2"></div>
    </div>

給父元素設(shè)置overflow:hidden;
代碼如下：

   body{
        margin:0;
    }
    .box-1{
        overflow:hidden;
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }

  <div class="box-1">
        <div class="box-2"></div>
    </div>

上面這兩種方法其實(shí)是根據(jù)BFC（塊級(jí)格式化上下文），因?yàn)锽FC會(huì)讓父元素包含浮動(dòng)的子元素，從而解決父元素高度坍塌問(wèn)題，所以只要能觸發(fā)BFC就行。

給父元素固定的高度
這個(gè)沒(méi)什么好說(shuō)的，就不贅述了，因?yàn)樵趯?shí)際開(kāi)發(fā)中高度一般都由內(nèi)容撐開(kāi)。

利用偽元素:after，并且清除浮動(dòng)
請(qǐng)看如下代碼：

  body{
        margin:0;
    }
    .clearfix{
        width:300px;
        background-color:#f00;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .box{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }

 <div class="clearfix">
        <div class="box"></div>
    </div>

以上是“css怎么解決浮動(dòng)導(dǎo)致父元素高度坍塌”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：css怎么解決浮動(dòng)導(dǎo)致父元素高度坍塌-創(chuàng)新互聯(lián)
本文鏈接：http://muchs.cn/article30/dspgpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、電子商務(wù)、App開(kāi)發(fā)、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣、動(dòng)態(tài)網(wǎng)站

廣告

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