浮動後會發生哪些事情？

目錄

• 清除浮動
  • 浮動的特色
  • 浮動形成的影響
• 浮動問題
• 參考

浮動事後的任何元素都成了block level element

清除浮動

全部內容在浮動，若是不處理，那麼就會很可怕。幸運的是有一個屬性叫作clear，當將它應用到一個元素時，它基本上說"中止浮動到這裏"--- 這個元素和它以後的元素都不會浮動，除非你應用一個新的float到另外一個元素。

clear有三個值:

• left: 中止左側浮動
• right: 中止右側浮動
• both: 中止左右浮動

浮動的特色

• 浮動元素會脫離正常的文檔流，按照其margin指定的位置相對於它的上一個塊級元素(或父元素)顯示。
• 浮動元素後面的塊級元素的內容會圍繞此浮動元素, 可是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠其。
• 浮動元素後面的內聯元素會向此浮動元素的外邊距靠齊。

浮動形成的影響

1. 對父元素的影響

   * 對於其父元素來講，元素浮動以後，它將脫離正常的文檔流，因此它也沒法撐開其父元素, 形成其父元素的塌陷。

2. 對其兄弟元素(非浮動)的影響

   • 若是兄弟元素是塊級元素: 該元素會忽略浮動元素的位置而佔據它的位置，而且元素會處在浮動元素的下層，但它的內部文字和其餘行內元素都會圍繞浮動元素。
   • 若是兄弟元素是內聯元素：則元素會環繞浮動元素排列。

3. 對其兄弟元素(浮動)的影響

   • 同一個方向的浮動元素：當一個浮動元素在浮動過程當中碰到同一個方向的浮動元素時，它會緊跟在它們後面。
   • 相反方向的浮動元素：互不影響，在同一條水平線上，當空間不夠時會被擠下去。

浮動問題

當對div用的百分比時，而後浮動剛恰好，可是若是要爲div設置border、padding等等，那麼可能就會超過100%或者父級盒子的大小，所以能夠爲div設置box-sizing: border-box。

另一個問題, 當你有一下佈局時：

<div>
    <div class="fl">111</div>
    <div class="fl">222</div>
</div>
<footer>333</footer>

.fl {float: left}
footer {margin-top: 50px;clear: left;}

由於使用了clear: left後，因此footer不在圍繞浮動元素。可是你會發現，margin-top: 50px並不起做用。爲了解決這個問題, 在HTML中添加新的div元素，而且設置它的class爲clearfix。此時，能夠取消了footer的clear:both;以下：

<div>
    <div class="fl">111</div>
    <div class="fl">222</div>
    <div class="clearfix"></div>
</div>
<footer>333</footer>

.fl {float: left}
footer {margin-top: 50px;}
clearfix {clear: both;}

可是這只是簡單的解決了這個問題而已。

所以歸納一下清除浮動(我以爲應該叫閉合浮動更好一點兒，清除浮動只是清除了浮動，可是不能解決高度塌陷的問題)的幾種方法：

• 第一個，像上面那樣，可是沒有語意化，而且增長了許多毫無心義的標籤。
• 第二種，The Overflow Method, 設置overflow: auto或者hidden，就能夠了，可是它不是專門用來閉合浮動的，並且要當心overflow後可能會隱藏或者出現滾動條。
• 第三種，推薦使用。

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

參考

All about floats

那些年咱們清除過的浮動

BFC神奇背後的原理

mdn