關於浮動與清除浮動，你應該知道的

時間 2019-11-07

標籤關於浮動清除應該知道简体版

原文原文鏈接

我在作頁面佈局的時候，多多少少總會受到來自浮動的困擾，所以專門經過實踐來總結一下浮動與清除浮動。html

首先總結幾個基礎的概念：佈局

浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的佈局，可是會影響內聯元素的排列[一般是文本]；spa

文檔流：在文檔流中，塊元素會單個元素獨佔一行3d

接下來咱們經過實際演示來看看關於浮動的那些事兒。code

下面是5個div塊元素在文檔流中一次排列htm

咱們知道浮動元素有幾個規律blog

若是浮動元素的上一個元素也是浮動，那麼該元素會與上一個元素排列在同一行，若是行寬不夠，後面的元素會被擠到下一行
若是浮動元素的上一個元素不是浮動，那麼該元素仍然處於上一個元素的下方，根據浮動設定在左或者在右，而其自己也脫離文檔流。後邊的元素會自動往上移動到上一個文檔流塊元素下方爲止

根據上面的規則，咱們作一些改動來驗證一下ip

給2添加左浮動，給3添加右浮動rem

首先1沒有浮動，因此2在1的下一行，而3的上一個元素2是有浮動的，因此3和2在同一行，2和3由於有了浮動，因此脫離了文檔流，他們後面的元素4就自動往上移動，處於1的下方文檔

給元素2添加左浮動

由於它的上一個元素1沒有浮動，因此排列在1的下方，不和1同一行。而元素2同時脫離了普通流，所以後邊的元素會頂替上來

所以，浮動元素的位置是根據他的上一個元素來肯定的[以及浮動位置來肯定]

清除浮動

可能浮動會比較好理解一點，而很多人會對清除浮動有一些誤解。

清除浮動並非說讓浮動元素回到文檔流
清除浮動只會改變改元素自身的位置，而且只針對排在該元素前面的元素。目的是讓本身的左邊或者右邊沒有浮動元素

例子1

給2添加左浮動，給3添加右浮動，以後給3添加清除左邊的浮動。

由於2是3的上一個元素，因此給3清除浮動，只有2才能影響他的位置，而2在3的左邊，所以只有給3添加清除左浮動纔有效果，清除左邊浮動的意思，就是讓2不在3的左邊，因此3會改變本身的位置，移動到2的下一行，可是右浮動的效果任然在，因此在下一行的右側

再給5添加刪除右浮動效果，由於5的右邊有一個浮動元素是3，而3是5前面的元素，所以5會改變位置，讓本身左右沒有浮動元素

例子2

給1，2，3，4添加左浮動

而後給3添加清除左浮動的效果。若是直接給3清除右浮動，將沒有任何變化，由於3右邊的浮動效果是4，而4處於3的後邊，不會影響3的位置

關於高度坍塌

當沒有指定高度的父元素中的子元素所有都浮動時，父元素中內部高度由於是普通流中的塊元素撐起來的，因此這個時候父元素的高度會變成0.或者會有部分浮動元素的位置會超出父元素的高度以外。這種現象，叫作高度坍塌。

以下圖，給元素設置左浮動。設置了邊框的父元素由於沒有高度因此上下邊框重合，看上去就像一條線

解決方法：使用:after僞元素

<!-- 浮動 清除浮動 高度坍塌 -->
<!DOCTYPE html>    
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>高度坍塌</title>  
    <style>  
        .div1 {  
            border: 1px solid #ccc;        
        }
        .div1:after {           
             content: '.';           
             display: block;            
             height: 0;            
             visibility: hidden;            
             clear: both;        
         }
        .div2 {            
            width: 100px;            
            height: 100px;            
            margin: 5px;            
            background-color: orange;            
            float: left;        
        }
    </style>
    <!--[if IE]>  
    <style> 
        .div1 { 
            zoom:1;/*觸發hasLayout*/  
            display:block;  
        }  
    </style>  
    <![end]-->
</head>  
<body>  
    <div class="div1">  
        <div class="div2"></div>  
    </div>  
</body>  
</html>

after的原理是在div1的子元素最末尾添加一個元素，若是該元素可以位於div2的後面，而且沒有浮動，那麼父元素div1的高度就會從新獲取。所以使用了上方的解決方案