先來了解一下block元素和inline元素在文檔流中的排列方式。

　　block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；

　　inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效

• 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
• 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麽A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麽A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麽A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列

float
p{float:left}
向左浮動
p{float:right}
向右浮動

2)清除浮動

clear
p{clear:none}
clear:left
clear:right
clear:both
需要註意的是:
clear只會影響自身,不會影響其他元素.
當他clear left 的時候,只是把不讓自己左邊有元素,當他昨天有浮動元素的話,就會自己另開一行.

ps:程序的執行是按照body裏面的順序執行,而不是按照head裏面的屬性執行,當你想更改之執行順序的時候,就改body的順序.

css-浮動