元素浮動定義
float 屬性定義元素在哪個方向浮動馁菜。以往這個屬性總應用于圖像茴扁，使文本圍繞在圖像周圍，不過在 CSS 中汪疮，任何元素都可以浮動峭火。浮動元素會生成一個塊級框，而不論它本身是何種元素智嚷。
如果浮動非替換元素卖丸，則要指定一個明確的寬度；否則盏道，它們會盡可能地窄稍浆。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行猜嘱，這個過程會持續(xù)到某一行擁有足夠的空間為止衅枫。
why 子元素浮動 會導致父元素 高度塌陷？
這是因為內(nèi)部的元素設置float:left || right后朗伶，就丟失了clear:both和display:block（持懷疑態(tài)度）的樣式弦撩，所以外部的父容器不會被撐開。
舉個??：
子元素未設置浮動论皆，父元素自動被撐開
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<style>
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
}
</style>
web前端開發(fā)學習Q-q-u-n： 731771211益楼，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻点晴，PDF）
子元素設置浮動感凤，父元素高度塌陷
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<style>
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
</style>
閉合浮動的常見解決方案
最終，我們要的效果是要跟沒設置浮動之前的效果一樣粒督，讓父元素高度自適應：
-
在浮動元素之后添加清除浮動的子元素：
<div class="father">
<div class="son"></div>
<div class="clearFloat"></div>
</div>
<style>
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
.clearFloat {
width: 100%;
height: 0;
clear: both;
}
</style>
web前端開發(fā)學習Q-q-u-n： 731771211陪竿，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻坠陈，PDF）
父元素設置 overflow: hidden
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 400px;
border: 1px solid blue;
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
</style>
是不是很神奇萨惑！因為子元素的浮動，會導致父元素誤認為content高度為0（即藍色邊框為一條線）仇矾，所以父元素設成overflow:hidden溢出隱藏的話庸蔼，直覺上應該子元素由于溢出導致不顯示才對。但真實效果是：父元素設成overflow:hidden溢出隱藏后贮匕，父元素高度居然自適應了姐仅！這是怎么回事呢？是因為 BFC（Block Formatting Context），感興趣的童鞋掏膏，點擊鏈接了解一下哈...
用 :after 偽元素劳翰，思路是用:after元素在div后面插入一個隱藏文本”.”，隱藏文本用clear來實現(xiàn)閉合浮動
.father:after {
clear: both;
content: "."; //任意文本如“dfgdfg”
display: block;
height: 0; //高度為0且hidden讓該文本徹底隱藏
visibility: hidden;
}
