浮動 Floats 是 CSS 中的一種布局方式。它的渲染位置在行框與包含塊之間庆杜，這樣就可以使行框內文字與浮動元素不重疊并且環(huán)繞它顯示。在布局過程中也經(jīng)常會使用它來達到左右并排布局的效果。但是，由于浮動特性虑省，容器如果沒有明確設定高度，會依照普通流內元素高度設置僧凰，這樣就會導致脫離普通流的浮動元素溢出容器探颈，影響其后元素布局。
- 文字環(huán)繞效果
<p>It's fun to float.It's fun to floatIt's fun to float</p>
p {margin:0; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
- 創(chuàng)建分欄
在上例基礎上训措，只要給段落設定寬度伪节，然后浮動它即可。
清除浮動
浮動框不屬于文檔中的普通流绩鸣，當一個元素浮動之后怀大，文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當浮動框高度超出包含框的時候呀闻，也就會出現(xiàn)包含框不會自動伸高來閉合浮動元素（“高度塌陷”現(xiàn)象）化借。
清除浮動的方法：
1.使用 clear 樣式清楚
.clear-float { clear:both; }
clear 屬性規(guī)定元素的哪一側不允許其他浮動元素。這個規(guī)則只能影響使用清除的元素本身捡多，不能影響其他元素蓖康。
clear 會為元素添加足夠的空白空間，使到該元素的位置會放置在它前一個浮動元素之下垒手，這跟增加元素外邊距使到元素占據(jù)滿行而強制換行的效果是一樣的蒜焊，事實上在 CSS1 和 CSS2 中，清除浮動正是通過自動為清除元素（即設置了 clear 屬性的元素）增加外邊距實現(xiàn)的科贬，從 CSS 2.1 開始改為增加額外的空白空間泳梆，不改變外邊距。
2.使用偽元素 :after 清除
.after-clear-float :after{content:””; display:block; clear:both;}
3.使用 overflow 清除
.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}
overflow 樣式值為 非 visilbe 時榜掌，實際上是創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts优妙。創(chuàng)建了它的元素，會重新計算其內部元素位置憎账，從而獲得確切高度套硼。這樣父容器也就包含了浮動元素高度。
相對可用方法
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
