1.2 float佈局-深度解析-refer to 《CSS in Depth》

若是說網頁的信息在html，那網頁的靈魂就在css文件對網頁的佈局了。

float

float是最先出現的，專爲插圖準備的樣式。它的誕生就決定了它受用範圍的限制，而咱們用它的行爲特色對頁面進行佈局，也會出現不少的奇奇怪怪的毛病。接下來談一下float的特色。

1.浮動

對元素設置 float: left; 以後，元素會脫離文檔流，display會失效，在文檔流中表現爲一個空字符""。但它又確確實實存在，在文檔中又能看到，也會對文字進行影響。文字會緊挨着float元素，就像word裏面的圖片環繞，不管放哪，文字都會跟着動態包裹。

取值爲 float: left | right ; 由於它像空字符"",又確實存在並同時對文字進行影響，伴隨了不少毛病與修補。

1.1 脫離文檔

若是一個普通元素的子元素都是float，不注意的時候會發現 background-color 沒有像所想的那樣佈置顏色，瀏覽器檢查就看出實際上是元素沒有內容。

1.2 突破界限

若是相鄰元素有文字，就會發現 float元素 直接對相鄰元素文檔流進行干擾，從新排列。

其實這個特色在書本格式中仍是挺好用的。

1.3 奇怪排列

多個會依次按順序堆積，當到下一列的時候就出現問題了。

它不會按照你的邏輯來，而是選擇位置高的地方堆積。

2.補丁

因爲 float 有這麼多臭毛病，因而對他打了幾個補丁：clear、BFC

2.1 清除浮動

在子元素末尾添加 clear: both; 這個末尾元素必須爲塊級元素 block ，而後他的位置就會被固定到末尾，與 float 一塊兒排列，並出如今文檔流中，因爲本事內容爲空，就像是float元素本身進行填充。
clear: both ，能夠在html中進行插入，但不夠優雅，因此用僞元素 ::after

2.2 按行排列

在特定的每行的行首元素設置 clear: left ，可使用僞類如 nth-child(3n+1) 。

2.3 BFC

BFC( block formatting context )，說的是作出一個元素，這個元素，不準本身的 float元素 出去，也不準外面的 float元素 進來，也不讓內 margin 突破出來。
能達到這個要求的包括:

1. float(除了none) 本身
2. overflow(除了visible)
3. display: inline-block | table-cell | table-caption | flex | inline-flex | grid | inline-grid(這些叫作塊級限制)
4. position: absolute | fixed

根元素自己也是頂級BFC

能夠說，clear 與 BFC 就是針對float的補丁。