css學習總結（一） 浮動

float屬性可以使塊元素位於頁面同一行內，但也存在以下問題：

1. 是否每行中所有同級塊元素都要加float屬性；

2. 當float元素後面的塊元素如何換行；

3. 當頁面（父元素）寬度縮小得比同行所有塊元素寬度（包括margin和padding）之和要小時，後面的塊元素會自動換行

問題1：

同行中的塊元素最好都加上float屬性，若只是在第乙個元素上使用float屬性時會出現以下情況

圖1  僅在第乙個元素（紅色）上加入float屬性時會出現錯誤

參考**：

#div1

#div2

若在div2上也加入float:left屬性則可解決此問題。

問題2： 

通過clear屬性讓後續的塊元素換行。

圖2 增加clear屬性後的效果

參考**：

#div1

#div2
#div3
.clear 

問題3：

通過父元素設定min-width來避免該問題。當瀏覽器寬度很小時，頁面的布局必然被打亂，因此通過設定min-width，保證有乙個足夠大的容器可以容納所有元素，布局便不會被打亂。

CSS總結 浮動

這一章主要記錄定位與浮動常用的。說到浮動我們要先說說標準流和浮動流。標準流很常見，瀏覽器預設的方式就是標準流。標準流怎麼理解呢？實現我們得知道css中的三種元素分類。行內元素，塊級元素，行內塊級元素 行內元素 塊級元素 行內塊級元素 不獨佔一行 獨佔一行 不獨佔一行 預設和內容一樣寬 預設和父元素一...

CSS浮動總結

浮動屬性可以讓元素產生浮動效果，float的常用取值有 none 不浮動，預設值 left 向左浮動 right 向右浮動 元素一旦浮動後 脫離標準流 朝著左 右 方向移動，直到自己的邊界緊貼著包含塊 一般是父元素 或者其他浮動元素的邊界為止 定位元素會層疊在浮動元素上面 浮動元素不能與行內級內容層...

css浮動總結

原理 使浮動元素脫離文件流 作用 解決頁面橫向排列問題 同一層級下，第乙個元素設定浮動，脫離文件流 空標籤清除浮動 clearfix 偽元素清除浮動 clearfix after 相容低版本ie clearfix after1.父子元素，子元素設定margin top,此刻子元素的margin to...