CSS-清除浮動

為什麼要清除浮動

由於父盒子在很多情況下，不方便給高度，但子盒子浮動後又不佔又位置，因此需要清除浮動防止父元素高度塌陷
 

清除浮動的本質

• 清除浮動的本質是清除浮動元素造成的影響
• 如果父盒子本身有高度，則不需要清除浮動
• 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度，父級有了高度，就不會影響下面的標準流了
   

清除浮動的策略

• 閉合浮動，只會讓浮動在父盒子內部影響，不影響父盒子外部的其他盒子
   

清除浮動的四種方法

1.額外標籤法或隔牆法,（新增加的盒子必須是塊級元素）

	.box1 {
        border: 1px solid green;
    }

    .fl {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }

    
    .fr {
        float: right;
        width: 100px;
        height: 100px;
        background-color: blue;
    }

	<div class="box1">
    	<div class="fl">1</div>
   	 	<div class="fr">2</div>
   		 <!-- 新增加的盒子必須要求是塊級元素 -->
    	<div class="clear"></div>
	</div>

2.父級新增overflow屬性

優點：程式碼簡潔
缺點：無法顯示溢位部分

.box2 {
        /* 清除浮動 */
        overflow: hidden;
        border: 1px solid green;
    }

<div class="box2">
    <div class="fl">1</div>
    <div class="fr">2</div>
</div>

此方法觸發了BFC

什麼是BFC

BFC(Block Formatting Context) 塊級格式化環境
BFC是一個CSS中的一個隱含的屬性，可以為一個元素開啟BFC，開啟BFC該元素會變成一個獨立的佈局區域

元素開啟BFC的特點：
1.開啟BFC的元素不會被浮動元素所覆蓋
2.開啟BFC的元素子元素和父元素外邊距不會重疊
3.開啟BFC的元素可以包含浮動的子元素

可以通過一些特殊方式來開啟元素的BFC:
1.設定元素的浮動(不推薦)
2.將元素設定為行內塊元素(不推薦)
3.將元素的overflow設定為一個非visible的值
常用的方式為元素設定 overflow:hidden; 以開啟其BFC,使其開啟包含浮動元素,防止高度塌陷

3.父級新增after偽元素

.clearfix::after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
    
<div class="box3 clearfix">
    <div class="fl">1</div>
    <div class="fr">2</div>
</div>

4、父級新增雙偽元素（clearfix這個樣式可以同時解決高度塌陷和外邊距重疊的問題）

.clearfix::before,
.clearfix::after {
        content: '';
        display: table;
    }

.clearfix:after {
        clear: both;
    }
    
<div class="box4 clearfix">
 	<div class="fl">1</div>
   	<div class="fr">2</div>
</div>