當元素的 float 屬性不為 none 時就產生了浮動。
<p class="float">float</p>
.float { float: left; width: 100px; height: 100px; background-color: #ddd;}
浮動會使元素脫離文檔流，具體表現為：
父元素高度塌陷，即不會包含浮動元素。
比如上面的代碼就會表現為
父元素高度塌陷
文本環繞。
文本環繞效果
可以注意到這裡.normal元素的寬度覆蓋了.float元素，但是.float元素下是沒有文本的，也就是說文本被“擠”出來了，這是因為它雖然會脫離文檔流，但是不會脫離文字資料流。這個效果也是float屬性的本意。其代碼如下：
<body> <p class="float">float</p> <p class="normal">正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素</p></body>
body { background-color: #ccc;}.float { float: left; width: 100px; height: 100px; background-color: #ddd;}.normal { background-color: #fff;}浮動元素的外邊距不會合并。
關於外邊距合并的相關內容可以戳這裡。
元素一旦浮動便會變成行內塊元素，即 display: inline-block。
上面提到的文本環繞。
寫一個三列布局，左右固定寬度，中間自適應。
<body> <p class="left float">left</p> <p class="right float">right</p> <p class="mid">自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素</p></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> <p class="left float">left</p> <p class="mid">自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素</p> <p class="right float">right</p></body>
如上把中間自適應的元素寫在中間，其實這樣比較符合邏輯，但是如果這樣寫是行不通的，右邊的元素會掉下來，因為 .mid 元素是區塊層級元素，會佔滿整行，.left 不會掉下來是因為它本來就是脫離文文檔流的浮動元素。
這裡我唯寫不會產生無意義標籤的方法。
浮動元素後面若有兄弟元素，則可以在給它的兄弟元素加上clear屬性。
如文本環繞那一部分代碼，給 .normal 加上 clear:left 或者 clear:both。clear 的具體用法這裡不做過多贅述。
給要清除浮動的元素加上偽類或者虛擬元素。
.float::after { content: ''; display: block; visiability: hidden; height: 0; clear: both;}關於 ::after 的使用可以看 MDN 的文檔。
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 就能清除子項目的浮動。
【相關推薦】
1. 免費css線上視頻教程
2. css線上手冊
3. php.cn獨孤九賤（2）－css視頻教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
