CSS-清除浮動

<pre>

清除浮動

盒子高度問題

  • 在標準流中內容的高度可以撐起盒子的高度
<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>
  • 在浮動流中浮動元素內容的高不可以撐起盒子的高
<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>

清除浮動方式一

  • 給前面的父盒子添加高度

  • 示例代碼:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*這里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加高度前:

  • 添加高度后

  • 注意點:

    • 在企業開發中能不寫高度就不寫高度, 所以這種方式不常用

清除浮動方式二

  • 利用clear:both;屬性清除前面浮動元素對我的影響

  • 示例代碼:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*這里*/
            clear: both;
            /*margin無效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加clear: both;前:

  • 添加clear: both;后

  • 注意點:

    • 使用clear:both之后margin屬性會失效, 所以不常用

清除浮動方式三

  • 在兩個有浮動子元素的盒子之間添加一個額外的塊級元素

  • 示例代碼:


<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*這里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用額外塊級元素實現margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>

<!--這里-->
<div class="wall h20"></div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加額外塊級元素前

  • 添加額外塊級元素后

  • 注意點

    • 在外墻法中可以通過設置額外標簽的高度來實現margin效果

    • 搜狐中大量使用了這個技術, 但是由于需要添加大量無意義的標簽, 所以不常用

清除浮動方式四

  • 在前面一個盒子的最后添加一個額外的塊級元素

  • 示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*這里*/
        .wall{
            clear: both;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
    <!--這里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加額外塊級元素前

  • 添加額外塊級元素后

  • 注意點:

    • 內墻法會自動撐起盒子的高度, 所以可以直接設置margin屬性

    • 和內墻法一樣需要添加很多無意義的空標簽，有違結構與表現的分離，在后期維護中將是噩夢

清除浮動方式五

  • 什么是overflow:hidden?

    • overflow:hidden的作用是清除溢出盒子邊框外的內容

  • 示例代碼

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

  • 添加overflow:hidden前

  • 添加overflow:hidden后

  • 如何利用overflow:hidden;清除浮動

    • 給前面一個盒子添加overflow:hidden屬性

  • 示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*這里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加overflow:hidden;前

  • 添加overflow:hidden;后

  • 注意點:

    • 由于overflow:hidden可以撐起盒子的高度, 所以可以直接設置margin屬性

    • IE8以前不支持利用overflow:hidden來清除浮動, 所以需要加上一個*zoom:1;

    • 優點可以不用添加額外的標簽又可以撐起父元素的高度, 缺點和定位結合在一起使用時會有沖突

  • *zoom:1;和_zoom:1的區別

    • 這個是hack寫法，用來識別不同版本的IE瀏覽器

    • _后面的屬性只有IE6能識別

    • *后面的屬性 IE6 IE7能識別

清除浮動方式六

  • 給前面的盒子添加偽元素來清除浮動

  • 示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*這里*/
        .clearfix:after {
            /*生成內容作為最后一個元素*/
            content: "";
            /*使生成的元素以塊級元素顯示,占滿剩余空間*/
            display: block;
            /*避免生成內容破壞原有布局的高度*/
            height: 0;
            /*使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和交互*/
            visibility: hidden;
            /*重點是這一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 觸發IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加偽元素前

  • 添加偽元素后

  • 注意點:

    • 本質上和內墻法一樣, 都是在前面一個盒子的最后添加一個額外的塊級元素

    • 添加偽元素后可以撐起盒子的高度, 所以可以直接設置margin屬性

    • CSS中還有一個東西叫做偽類, 偽元素和偽類不是同一個東西

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,809評論 1贊 92
  • 什么是CSS清除浮動？ 在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（flo...
    秦至閱讀 434評論 1贊 8
  • 前言 摘要： 浮動的元素可以向左或向右移動，直到它的外邊緣碰到父容器或另一個浮動元素為止。由于浮動元素不在文檔的普...
    zouyang0921閱讀 395評論 0贊 2
  • w是我小學一二年級的同學，于我而言，是一段特別的回憶。相識的場景已經記不清了，也不知是怎么玩到一起的。名字里有相同...
    77歪歪閱讀 156評論 0贊 0
  • 《厲害的媽媽到底會養出什么樣的孩子》 珊珊得久/文 有句教育名言這樣說原生家庭與孩子之間...
    珊珊得久閱讀 956評論 0贊 2