浮動(float):浮動原先設定時主要是用於文本環繞圖像設定的，後來發現其在css布局中有很大的幫助，故漸漸使用浮動。

浮動後的元素脫離了文檔的普通流，使得浮動的元素不占據文檔的位置，其他元素可以覆蓋其位置。

浮動元素不影響塊框元級元素布局，但是可以影響內聯元素（主要是文本）布局。（即浮動元素不占據文檔流位置，不影響其他元素布局，但是浮動元素的內聯元素如：文本等會改變其布局）

如圖：塊1浮動，塊2 沒有浮動，其位置在塊一處（被覆蓋：浮動元素不占據文檔流位置），但是其內聯的文本卻在其原本的位置（浮動元素的內聯元素布局改變）。

浮動的文本環繞：文本的位置會占據#A的位置，但是其文本會始終環繞在浮動元素A附件。

1. #A {
2. float:left;
3. width:200px;
4. height:200px;
5. background:#C00;
6. }
7. #B {
8. width:480px;
9. height:230px;
10. 10. background:#000;

浮動的弊端（高度塌陷）： 如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候，那麽它的高度就會踏縮為零。

浮動的刪除：1.clear:both ----如果浮動較多，會有很多<div class=’clear’></div>

2.在容器中使用overflow：auto或者hidden

3.給浮動的容器也添加浮動 float -------這樣會使容器也帶有浮動，影響整體布局

4.使用偽類元素 :after 在其容器中添加新樣式 -------推薦使用，可復用性高

<div class="container clearfix">

        <div class="block1"><span>塊1</span></div>

        <div class="block2"><span>塊2</span></div>

        <div class="block3"><span>塊3</span></div>

    </div>

.clearfix:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

float 浮動詳解