[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容器剩下的空間撐滿，也就是自適應