CSS浮動基礎詳解
一、浮動
每個元素單獨佔據瀏覽器的一整塊。
塊級元素按照標準流向下依次排列。
實驗一，僅一個div設定浮動（左）程式碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" 這樣沒有經過css浮動修飾，父div下的子div按照文件流的方式順序排列：效果如圖：
現在我們設定box1向左浮動：
.son1{
float:left;
}這裡我們對第一個盒子設定浮動，既當對box1設定向左浮動後，box1 就脫離了文件流，她的寬度不再伸展到最右端，而是以能夠容納她的內容的最小寬度顯示。box2 佔據了原來box1的位置，就好像box1不存在一樣，但是box2 的文字並不是頂頭寫，因為是受到浮動盒子的影響。注意：box2 的最左端是在box1原來的頂頭位置，僅僅是文字被box1頂到了後面。因此雖然div之間設定了margin:15px，但是看到文字”box1”和”box2”直接沒有間距，由此可證明，僅僅是文字被擠了過去。
實驗二：將box1 和box2都設定浮動：
修改程式碼：
.son1{
float:left;}
.son2{
float:left;}效果如圖：
可以看出這次box1和box2中間有了間距，應為他們設定的margin：15PX，設定浮動後，margin是疊加的，因此他們之間的間距為30px。同樣字“box3”僅僅是被擠到了後面。
實驗三：將box3也設定浮動：
.son3{
float:left;}效果如圖：
這時，原來的
段落應為前三個div都脫離了文字流，就佔據原來box1所在的位置，從頭開始。其文字由於受浮動的影響，圍繞浮動的盒子進行排列。
實驗四：將box3向右浮動：
.son3{
float:right;}效果如圖：
試驗五：使用clear屬性清除浮動影響：
未清除前：
文字圍繞所有浮動的box分佈。
給
段落加了clear屬性，clear：left ，清除左邊浮動盒子對文字排版的影響；清除後如圖：
如果想清除左右盒子對文字的影響可以設定：
clear:both;實驗六：擴充套件盒子的高度
一個容器所容納的盒子都是浮動的盒子時，當一個浮動盒子的高度高於容器時，容器不能自動擴充套件，這裡我們把文欄位落去掉，檢視一下效果。對於解決這種問題的方法當然也是用clear屬性，只不過需要一個單獨的空的div作為清除浮動的盒子。
body中的程式碼去掉文欄位落後如下：
<body>
<div class="father">
<div class="son1">box1</div>
<div class="son2">box2</div>
<div class="son3">box3<br>
box3<br>
box3 <br>
</div>
</div>
</body>效果如圖：
新增空div ，設定class屬性為clear，設定class為clear的css：
.father .clear{
padding:0;
margin:0;
border:0;
clear:both;
}新增空div，class=“clear”
<div class="father">
<div class="son1">box1</div>
<div class="son2">box2</div>
<div class="son3">box3<br>
box3<br>
box3 <br>
</div>
<div class="clear"></div>
</div>
效果如圖：
