CSS 清除浮動

在元素設置浮動（float）後，該元素就會脫離文檔流，並且向左或向右浮動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。

一、浮動元素對佈局的影響

1.1、浮動元素造成父元素的高度塌陷：

原來的父元素高度是內部元素撐開的，但是當內部元素浮動後，脫離文檔流浮動起來，那父元素的高度就坍塌，變為高度 0px。

<style>
    .container {
        border: 1px solid blue;
    }
    
    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: red;
        float: left;
    }
</style>

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

上述代碼中 container 元素的高度將會是 0px。

1.2、浮動元素對鄰近非浮動元素造成影響：

<style>
     .container {
         border: 1px solid blue;
     }
    
     .box0 {
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: red;
         float: left;
     }
    
     .box1 {
         width: 200px;
         height: 200px;
         background-color: green;
     }
</style>

<div class="container">
     <div class="box0"></div>
     <div class="box0"></div>
     <div class="box0"></div>
     <div class="box1"></div>
</div> 

上述代碼中 box1 的位置受到前面元素浮動的影響，而且不管 box1 是在 container 裡面還是外面都會受到影響。

二、清除浮動（解決浮動元素影響鄰近非浮動元素問題）

CSS 清除浮動是指在使用浮動佈局時，解決浮動元素對非浮動元素的影響的問題。

當元素設置為浮動時，它會從文檔流中“漂浮”出來，不再占據原來的空間，導致後面的元素不能正確地換行顯示。為瞭解決這個問題，需要使用清除浮動的方法。

常見的清除浮動方法有以下幾種：

1、在浮動元素後添加一個空的容器，並給該容器設置 clear 屬性：

<div style="position: relative;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
  <div style="clear: both;"></div>
</div>

2、給父元素設置 overflow 屬性：

<div style="overflow: hidden;">...</div>

3、使用偽元素：

.clearfix::after {
   content: "";
   display: table;
   clear: both;
}

將以上代碼添加到需要清除浮動的元素的 CSS 中，併在 HTML 中將該元素的 class 設置為 clearfix。這樣，就可以通過使用偽元素清除浮動了。

4、使用 CSS flex 佈局：

在使用 CSS flex 佈局時，父元素預設會包含所有的子元素，因此不需要進行清除浮動。

<div style="display: flex;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
</div>

5、使用 CSS grid 佈局：

在使用 CSS grid 佈局時，父元素預設會包含所有的子元素，因此不需要進行清除浮動。

<div style="display: grid;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
</div>

上是 CSS 清除浮動的常見方法，需要根據具體的使用場景和需求來選擇最適合的方法。

三、解決浮動元素造成父元素高度塌陷問題

在開發過程中，有時需要解決浮動元素對父元素高度的影響，這時也可以使用以下方法解決：

1、使用絕對定位：

通過將浮動元素設置為絕對定位，可以避免浮動元素對父元素高度的影響。

<div style="position: relative;">
  <div style="position: absolute;">...</div>
  <div style="position: absolute;">...</div>
</div>

2、使用 table 佈局：

通過將父元素設置為表格佈局，可以避免浮動元素對父元素高度的影響。

<div style="display: table;">
  <div style="display: table-cell;">...</div>
  <div style="display: table-cell;">...</div>
</div>

這些方法可以幫助解決浮動元素對父元素高度的影響問題，但是需要根據具體的使用場景和需求來選擇最適合的方法。