CSS：清除浮動（額外標籤法、父級添加overflow、僞元素法、雙僞元素法）

時間 2020-06-20

標籤 css 清除浮動額外標籤添加 overflow 元素欄目 CSS 简体版

原文原文鏈接

一、清除浮動的緣由css

（1）不清除浮動的狀況：html

因爲父級的子元素不方便給高度（不給高度的時候父盒子的大小由裏面包含的子盒子來決定），可是，子元素爲浮動的又不佔有位置，致使父級的盒子高度爲0的時候就會影響下面的標準流的盒子。佈局

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
        
        </div>
        <div class="test">
            
        </div>
    </body>

</html>

因爲浮動元素不佔有原來的文檔流的位置，所以會對後面的元素的佈局產生影響。spa

（2）須要清除浮動的狀況3d

父級沒有高度code

子盒子浮動了htm

影響下面的佈局了blog

二、浮動的清除utf-8

（1）屬性值（clear）文檔

right：清除左側有浮動的元素

left：清除右側有浮動的元素

both：左右側都清除

（2）額外標籤法：

也稱爲隔牆法，會在浮動元素的末尾添加一個空標籤（必須是塊元素），例如：<div style="clear: both"></div>或者其餘標籤，例如：<br>等

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clear{ clear: both; } </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="clear">
                
            </div>
        
        </div>
        <div class="test"></div>
    </body>

</html>

此時，父盒子的高度會隨子盒子的多少而改變，而且不會影響後面的佈局。

（3）父級添加（添加overflow）

能夠給父級元素添加overflow屬性，將其屬性值設置爲hidden、auto或scroll

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                overflow: hidden;
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

（4）僞元素法：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clearfix:after{
                content: "";
                display: block;
                height: 0px;
                clear: both;
                visibility: hidden;
            }
            .clearfix{/*IE6\7專有*/
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="bigbox clearfix">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

（5）雙僞元素清除浮動（使用了before和after來清除浮動）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clearfix:before,.clearfix:after{
                content: "";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            .clearfix{
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="bigbox clearfix">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。