浮動

一、什麼定位

元素該出現的位置 分爲如下幾類：

普通流定位(文檔流定位)

浮動定位

相對定位

絕對定位

固定定位

二、普通流定位 頁面默認的定位方式

塊級元素：從上到下顯示

行內元素：從左到右顯示

三、浮動定位

一、什麼是浮動定位

元素會脫離默認文檔流,在頁面上不會佔據空間 浮動定位的元素會放置在包含框的左邊或者右邊 浮動的元素依然在包含框內 當浮動元素碰到其餘浮動元素時，就會中止浮動

二、浮動定位解決的問題 實現特殊的定位方式，好比：讓多個塊級元素在同一行內顯示

三、屬性 float 取值：

left : 左浮動

right : 右浮動

none : 無浮動

清除浮動所帶來的影響:

屬性： clear:left,right,both;

四、元素一旦浮動起來的話，那麼都將成爲塊級元素

一、浮動 元素 對 父層元素帶來的影響

影響：一個元素內若是包含了浮動元素，那麼該元素的高度可能會變成0。

緣由：浮動元素 脫離了 文檔流，理論上講，就不在父層容器內

解決方案:

一、顯示設置父層元素的高度

二、經過overflow:hidden 來撐起父層元素的高度

一、顯示方式

一、塊級元素 <div></div> hn p

變成行級元素： display:inline-block

特色：單獨佔一行

二、內聯元素/行內元素 span , b , i , u , s , a

變成塊級元素：display：block

總結：

1. 假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的， 那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)； 若是A元素上一個元素是標準流中的元素， 那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。

2. 清除浮動能夠理解爲打破橫向排列。

3. 對於CSS的清除浮動(clear)，這個規則只能影響使用清除的元素自己，不能影響其餘元素。