CSS浮動總結

浮動屬性可以讓元素產生浮動效果，float的常用取值有：

none:不浮動，預設值

left:向左浮動

right：向右浮動

元素一旦浮動後：

脫離標準流

朝著左（右）方向移動，直到自己的邊界緊貼著包含塊（一般是父元素）或者其他浮動元素的邊界為止

定位元素會層疊在浮動元素上面

浮動元素不能與行內級內容層疊，行內級內容將會被浮動元素推出

可以實現**環繞

行內級元素、inline-block元素浮動後，其頂部將於所在行的頂部對齊

前面兩個都是float:left,只會左右浮動而不會浮動到上面去。

如果元素是向左（右）浮動，浮動元素的左（右）邊界不能超出包含塊的左（右）邊界

浮動元素不會重疊：

如果乙個元素浮動，另乙個浮動元素已經在那個位置了，後浮動的元素將緊貼著前乙個浮動元素（左浮找左浮，右浮找右浮）

如果水平方向空間不夠，浮動元素向下移動，直到有充足的空間為止

（上面三個box都是左浮動，綠色的box由於空間不夠向下移動）

浮動元素的 頂端不能超過包含塊的頂端，也不能超過之前所有浮動元素的頂端

浮動元素脫離了標準流，變成脫標元素，不再向父元素匯報高度

父元素計算總高度時，不會計算浮動子元素的高度，導致了高度坍塌的問題

通過清除浮動來解決父元素高度坍塌問題，即清除浮動是為了讓父元素計算總高度的時候，把浮動子元素的高度算進去

1. 不推薦的方法:

2. 推薦的方法

CSS總結 浮動

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

css浮動總結

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

CSS清除浮動總結

一 拋一塊問題磚 display block 先看現象 分析html 結構 divclass outer divclass div1 1div divclass div2 2div divclass div3 3div div 分析css 樣式 outer div1 div2 div3 這裡我沒有給...