浮動
1. 什么是浮動
當元素的 float 屬性不為 none 時就產生了浮動。
<div class="float">float</div>
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}
2. 浮動的影響
-
浮動會使元素脫離文檔流，具體表現為：
-
父元素高度塌陷，即不會包含浮動元素。
比如上面的代碼就會表現為
父元素高度塌陷 -
文本環繞。
文本環繞效果
可以注意到這里.normal元素的寬度覆蓋了.float元素，但是.float元素下是沒有文本的，也就是說文本被“擠”出來了，這是因為它雖然會脫離文檔流，但是不會脫離文本流。這個效果也是float屬性的本意。其代碼如下：<body> <div class="float">float</div> <div class="normal">正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素</div> </body>body { background-color: #ccc; } .float { float: left; width: 100px; height: 100px; background-color: #ddd; } .normal { background-color: #fff; }
-
浮動元素的外邊距不會合并。
關于外邊距合并的相關內容可以戳這里。元素一旦浮動便會變成行內塊元素，即
display: inline-block。
3. 浮動的應用
上面提到的文本環繞。
-
寫一個三列布局，左右固定寬度，中間自適應。
<body> <div class="left float">left</div> <div class="right float">right</div> <div class="mid">自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素</div> </body>body { background-color: #ccc; } .float { float: left; width: 100px; height: 100px; background-color: #ddd; } .left { float: left; } .right { float: right; } .mid { height: 100px; background-color: #fff; margin: 200px; /*故意加上了上下 margin 值*/ }這里我故意加上了上了
margin值，可以看到效果：三列布局body也隨.mid的margin往下掉了，這點可以用前面介紹的外邊距合并來解釋。ps：我第一次自己寫這個三列布局的時候，html 是這樣寫的
<body> <div class="left float">left</div> <div class="mid">自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素</div> <div class="right float">right</div> </body>如上把中間自適應的元素寫在中間，其實這樣比較符合邏輯，但是如果這樣寫是行不通的，右邊的元素會掉下來，因為
.mid元素是塊級元素，會占滿整行，.left不會掉下來是因為它本來就是脫離文文檔流的浮動元素。
清除浮動
在子元素上清除
這里我只寫不會產生無意義標簽的方法。
浮動元素后面若有兄弟元素，則可以在給它的兄弟元素加上
clear屬性。
如文本環繞那一部分代碼，給.normal加上clear:left或者clear:both。clear的具體用法這里不做過多贅述。-
給要清除浮動的元素加上偽類或者偽元素。
.float::after { content: ''; display: block; visiability: hidden; height: 0; clear: both; }關于 ::after 的使用可以看 MDN 的文檔。
在父元素上清除，即BFC
BFC（Block Formatting Context），即塊級格式上下文，它的官方解釋是：
浮動、絕對定位元素（
position為absolute或fixed）、行內塊元素display:inline-block、表格單元格display:table-cell、表格標題display:table-caption以及overflow屬性值不為visible的元素（除了該值被傳播到視點viewport的情況）將創建一個新的塊級格式化上下文。
總結來說它要滿足下列條件之一：
-
float不為none -
position不為static或relative -
display為table-cell、table-caption、inline-block、flex、inline-flex -
overflow不為visible
只要給父元素加上以上任意一個屬性滿足條件，也就是給父元素加上 BFC 就能清除子元素的浮動。
