概念：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
大兄弟你該不會真的把概念讀完並且嘗試理解它？要是真的話，我只能說一句「你牛批」。
小白是不需要去理解概念的，只需要知道效果到底是啥樣的就ok了。
先看預設情況下的
html:
class
="fuyuansu"
>
class
="zuo"
>
div>
class
="you"
>
div>
div>
css:
.fuyuansu
.zuo
.you
塊級元素預設是獨佔整行，當想讓div不獨佔整行，而是併排排列時，其中一種方法就是讓元素浮動。
css**修改為：
.fuyuansu
.zuo
.you
新增浮動之後你會發現，元素併排了，但是父元素高度坍塌了。所以想讓父元素重新擁有高度，我們就要做「清除浮動」。
清除浮動的方法很多，這裡只介紹幾種常用的：
css**更新為：
.fuyuansu
優點：簡單粗暴直接，**量少，乙個屬性直接搞定。
缺點：當overflow的值設定為hidden的時候，會出現元素溢位隱藏效果。當overflow的值設定為auto的時候，元素超出父元素時，父元素會出現滾動條。
html：
class
="fuyuansu"
>
class
="zuo"
>
div>
class
="you"
>
div>
class
="clear"
>
div>
div>
css:
.fuyuansu
.zuo
.you
.clear
優點：不會影響父元素或者子元素的樣式。
缺點：會有冗餘的頁面元素，影響**維護
第一步：定義乙個樣式名，給樣式的偽元素新增clear:both
css:
.clearfix:after
class
="fuyuansu clearfix"
>
class
="zuo"
>
div>
class
="you"
>
div>
div>
效果就會是這樣
為什麼會這樣嘞？我們開啟控制台檢查一下頁面元素
從控制台我們可以看到，偽元素在頁面中位置，位於父元素內部的最底部，你回頭看看方法二就會發現，這個偽元素的位置和方法二中新增的clear這個div的位置是一樣的。所以方法三的原理和方法二的原理是一樣的，都是通過新增帶有在clear:both屬性的元素在父元素內部的底部位置，來達到清除浮動效果。
這個方法是目前清除浮動最常用的方法，優點在於**中不會出現冗餘的**，便於以後**的維護，另外就復用性高，定義乙個樣式名，在需要清除浮動的地方就新增這個樣式。做到「一次定義，多次使用」。由於樣式是定義在偽元素上的，所以不會影響其他元素的樣式。
接下來，我們來優化一下方法三
先來簡化一下**，這樣書寫**也能達到上面一樣的效果。
.clearfix:after
.clearfix
.clearfix:after
.clearfix
.clearfix:after
.clearfix:before
.clearfix
.clearfix:after,.clearfix:before
.clearfix:after
html :
class
="fuyuansu clearfix"
>
class
="zuo"
>
div>
class
="you"
>
div>
div>
css:
.fuyuansu
.zuo
.you
.clearfix
.clearfix:after,.clearfix:before
.clearfix:after
寫在最後：你努力的樣子，是我這輩子見過最帥的模樣
CSS清除浮動的三種方法，很實用
css清除浮動的方法有哪些呢？經常性地會使用到float，很多邪門的事兒都有可能是浮動在作怪，清除浮動是必須要做的，而且隨時性地對父級元素清除浮動的做法也被認為是書寫css的良好習慣之一。下面看今天的教程，此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 一 使用空標籤清除...
三種css清除浮動的方法
1 利用clear both來清除浮動，原理是在最後乙個浮動元素的同級新增乙個空便簽，並新增clear both，效果很不錯，但增加了乙個無語意標籤。3 利用overflow屬性。給浮動元素的父級新增overflow，設定為visible之外的任何屬性都行，但ie下需要觸發layout。從結構上講和...
清除浮動的三種方法
lang en charset utf 8 清除浮動的三種方法title type text css div3 div3 after style head style background blue border 1px solid gold 使用空標籤清除浮動。增加了無意義的結構元素 style ...