[toc]
## 初衷
float初衷是為了實現文字環繞效果
為了實現這種效果,設置為float的元素會具備以下兩個特性
- 父元素高度塌陷
- 行框盒子和浮動元素不會重疊(即使使用margin負值也是如此)
>**注意:** 這里說的是行框盒子,而不是外部的塊狀盒子
>
## clear
首先,只有**塊級元素**設置才有效
clear作用本質是讓**自己**不和float元素在一行顯示,而不是讓浮動元素怎么怎么樣。
并且設置了clear屬性對后面的浮動元素是不聞不問的,**只會抗拒前面的**浮動元素。(注意float:left/right 方向不同時,所謂的的前后也是不一樣的)
一般來說我們若是`float:left`,那么若要清楚浮動,使用`clear:left/both`,即左側抗浮動;若是`float:right`,則使用`claer:right/both`,即右側抗浮動。
最后clear并不是完全清楚了浮動,它只是解決了塌陷問題。
比如,用clear清楚浮動仍然會發生margin重疊
## 形成"塊"(BFC)
## 脫離文檔流
和塊級元素占位不沖突,不會撐開父級

(圖1)
### 塊級元素在前
上面是float元素在前的情況,如果是塊級元素在前,
那么float元素表現和文檔流中元素一樣,
任然會在**下一行**才顯示
## 但不脫離文本流
### 文本/span在后
文字環繞(如圖1)
### 文本/span在前
浮動元素會如下表現:
- 位置盡量靠上
- 在滿足上一條規則的前提下,位置盡量靠左/右


在保證紅色span不被擠到下一行的前提下,會盡可能的讓位給浮動的綠色span(這也可理解為浮動元素的盡量考上特性),
并且由于浮動元素盡量靠上,浮動元素在**一個行框盒子**中是可以和行級元素進行上下堆疊的(如果有空余位置),就像上面的第二個綠色span
## 與margin負值
浮動元素的前面如果是一個塊級元素,`margin-top`依然有效。
浮動元素的前面如果也是一個占滿一行的浮動元素,那么,`margin-top`也依然有效,
且還有一個很有意思的現象,如果使用`margin-left`負值,達到一定程度,會發現浮動元素跑到上面一行的末尾去了
這其實就是浮動元素`盡量靠上、盡量靠左`特性的體現
如果感覺還是不是很好理解,我們再來個普通點的例子,
我們讓前面的浮動元素不占一整行,

(是不是突然明白了點什么?道理其實是一樣的,占據一整行只是比較特殊的一個栗子,但原理是一樣的)
## 與flex
一個元素既可以作為flex項,又可以被浮動
flex相較于float的好處在于,flex既能讓非行內元素變為行內元素,并且還不會失去其自適應性,
比如三個flex子項,一個左浮動,一個右浮動,剩下的那個將`flex`置為`1`,這樣剩下的那個就會將flex容器剩下的空間撐滿,也就是自適應
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端