要清除浮動首先要清楚使用浮動後產生的影響
一般來說，網頁頁面元素都是按照文件流來流動，即從上到下；當然行元素是從左到右。使用浮動後，元素會改變原有的流動方式，即會浮動起來。但浮動之後，後面的元素會感知不到其存在。
eg：css樣式：
div
div:nth-of-type(1)
div:nth-of-type(2)
這是其一，其二當父元素沒有設定寬高時，若子元素浮動，父元素是感知不到子元素高度的
css樣式：
main
main div
12
3
可以看到子元素1,2，3，三個div元素設定了高度，但是main並沒有因為子元素而被撐開，這是因為三個子div設定了浮動，父元素並不能感知到子元素的存在。
清除浮動
父元素新增overflow，通過overflow（hidden、auto/scroll）觸發bfc清除浮動影響（不推薦使用）
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
main
divdiv:nth-of-type(1)
div:nth-of-type(2)
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
main
div.red
.green
/* 這是通過額外新增標籤， */
.blue
"red"
>
"green"
>
"blue"
>
::after偽元素清除浮動(推薦使用)
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
main
/* 追加內容 */
main::after
.clearfix
divdiv:nth-of-type(1)
div:nth-of-type(2)
"clearfix"
>
使用::before和::after雙偽元素清除浮動（推薦使用）
"fahter clearfix"
>
"big"
>big
"small"
>small
"footer"
>
分析浮動及清除浮動影響
浮動，顧名思義，就是使文字內容浮起來和動起來，浮指的是 脫離文件流，動指的是 向設定的方向移動。脫離文件流將會導致文件內容高度等不會被常規計算，會造成常見的文字覆蓋 高度塌陷等問題影響布局效果，例如 常規的有以下幾種 1 設定clear both 不允許兩邊有浮動現象，在浮動元素後的非浮動元素中設定...
浮動及清除浮動的方法
浮動元素脫離文件流，不佔據空間。浮動元素直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。1 使用空標籤清除浮動 在所有浮動標籤後面新增乙個空標籤定義cssclear both.弊端就是增加了無意義標籤,影響文件結構美觀性。1 div style clear both div 2 使用overflo...
浮動的影響與清除浮動
影響1 div1 div2 div3,要實現dev1 div2 在第一排顯示，div3另起一行？方法 給div1 div2加浮動，1和2會脫離正常流，因為div3屬於正常流會上到第一排，並且被1和2覆蓋 就是為什麼要清除浮動，消除浮動影響 方法1 加乙個空div，clearfix 在div3前加乙個...