CSS給元素清除浮動影響的方法，--最全四種方法

本文轉載自查看原文 2018-09-20 23:24 1366

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動方法一</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <!-- 在浮動元素的末尾添加一個空的標簽  -->
        <div class="clearfix"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動方法二</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 給父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動方法三</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 給父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        /*給父元素添加類clearfix*/
        .clearfix:after{ 
            content: ".";              /* 這里盡量寫點內容，否則在IE6-7會出現間隙 */
            dispaly: black;            /* 轉換為塊級元素 */
            height: 0;                 /* 高度為0 */
            clear: both;               /* 清除浮動 */
            visibility: hidden;        /* 隱藏盒子 */
        }
        .clearfix{
            *zoom: 1;    /* 這是專門給IE6-7做的清除浮動 */
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動方法四</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 給父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        /*給父元素添加類clearfix*/
        .clearfix:before,
        .clearfix:after{
              content:"";
              display:table;   /*這句話可以觸發BFC，BFC可以清除浮動*/
        }
        .clearfix:after{
             clear:both;
        }
        .clearfix{
              *zoom:1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 清除浮動的四種方法關於清除浮動的四種方法 css筆記：清除子元素對父元素的浮動效果的三種方法 CSS清除浮動的幾種方法清除浮動的三種方法 CSS浮動並清除浮動(造成的影響) css各類偽元素總結以及清除浮動方法總結清除浮動的幾種方法讓父元素圍住浮動子元素的三種方法 CSS3中三種清除浮動（float）的方法