背景

有兩個div父盒子, 內部子元素是浮動的: css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> * { padding:0px; margin: 0px; } .box, .box2 { width: 1000px; border: 2px solid red; } .box p, .box2 p { width: 100px; height: 50px; background-color:pink; float: left; margin-right: 10px; } </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
    </div>

    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>
</html>
複製代碼

方法一: 設置父元素高度

添加父元素高度, 值等於子元素高度缺點: 若是浮動的子元素大小改變, 父元素不能自適應html

.box, .box2 {
            width: 1000px;
            height: 50px;
            border: 2px solid red;
            clear: both;
        }
複製代碼

方法二: 給父元素添加clear屬性, 清除標籤元素自身受到的前面的浮動的影響

clear屬性的屬性值:瀏覽器

屬性值	解釋
left	清除前面左浮動帶來的影響
right	清除前面右浮動帶來的影響
both	清除前面左右浮動帶來的影響

.box, .box2 {
            width: 1000px;
            /* 方法一: 設置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            clear: both;
        }
複製代碼

缺點: 若是兩個父元素間設置了margin, 會塌陷markdown

方法三: 外牆法/隔牆法

在兩個父盒子之間添加一個div, 爲div設置clear屬性 ui

css:spa

.cl {
            clear: both;
        }
複製代碼

<body>
    <div class="box">
        <p></p>
        <p></p>
    </div>

    <div class="cl"></div>
    
    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>
複製代碼

優勢: 能夠用div的height模仿margin的高度缺點: 父盒子高度不能自適應3d

方法四: 內牆法

在父元素內部，全部的浮動子元素後面添加一個空的 code

元素，標籤高度爲 0，添加 clear 屬性。

.cl {
            clear: both;
        }
複製代碼

<body>
    <div class="box">
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
    <!-- 方法三: 外牆法 -->
    <!-- <div class="cl"></div> -->
    
    <div class="box2">
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
</body>
複製代碼

優勢: 能夠解決全部問題, margin不會塌陷, 父盒子高度能夠自適應orm

.box, .box2 {
            width: 1000px;
            /* 方法一: 設置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            /* 方法二: 父元素設置clear:both */
            /* clear: both; */
            margin: 10px;
        }
複製代碼

缺點: 使用html的代碼解決css的問題, 形成結構冗餘htm

方法五: 僞類

本質是使用僞類方法利用css代碼書寫一堵內牆。

僞類選擇器：經過選中的標籤添加僞類，去選中標籤的某個狀態或位置。 :after：這個僞類表示選中的是某個標籤內部的最後的位置。

書寫方法：前面必須加普通的選擇器，後面連續書寫僞類名稱。將僞類添加給一個選中父盒子的選擇器後面，通常給須要清除浮動的父盒子設置一個clearfix的類名。

.clearfix:after {
            content: "1";
            display: block;
            height: 0px;  /*不讓文字1撐高位置*/
            clear: both;
            visibility: hidden; /*隱藏屬性, 與overflow: hidden的區別在於它不會讓出位置*/
        }
複製代碼

<body>
    <div class="box clearfix">
        <p></p>
        <p></p>
        <!-- 內牆法 -->
        <!-- <div class="cl"></div> -->
    </div>
    <!-- 方法三: 外牆法 -->
    <!-- <div class="cl"></div> -->
    
    <div class="box2 clearfix">
        <p></p>
        <p></p>
        <!-- 內牆法 -->
        <!-- <div class="cl"></div> -->
    </div>
</body>
複製代碼

能夠解決全部問題

方法六: 溢出隱藏

給內部有浮動子元素的父元素添加溢出隱藏 overflow: hidden; 屬性，能夠解決浮動的全部問題.

overflow屬性:

元素高度設置後，overflow：hidden；效果是將超太高度的部分直接隱藏。
元素高度沒有設置時，若是元素同時設置了overflow：hidden屬性，元素會自適應內容的高度。

高度自適應緣由： 一個元素沒有設置高度，同時設置了溢出隱藏，瀏覽器在加載盒子尺寸時，遇到溢出隱藏瀏覽器會強制性去檢索內部的子元素的高度，不論子元素是標準流仍是浮動，都會將最高的高度做爲父盒子高度加載。

浮動不影響後面的元素： 父元素有了高度後，能夠管理住內部全部的浮動元素，不會延伸到後面標籤中影響貼邊。

.box, .box2 {
            width: 1000px;
            /* 方法一: 設置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            /* 方法二: 父元素設置clear:both */
            /* clear: both; */
            overflow: hidden;
        }
複製代碼

總結

若是父元素高度是固定的，建議使用 height 屬性解決。
若是父元素高度須要自適應，建議使用 overflow 屬性解決浮動問題。

CSS - 清除浮動影響的幾種方式總結