作為前端的好孩子，總會遇到一個經(jīng)典不朽的問題：有幾種閉合內(nèi)部浮動的方法？哈哈，是不是想說這個能難得住我？馬上能列出個123：

開胃小菜，拈來嘗嘗

1.在最后一個浮動元素的下面添加空白標簽
???? <div style = "clear:both"></div>or
???? <br clear = "all">
2.父元素overflow: hidden

IE 6不支持;一旦子元素的大小超過父容器的大小，就會出顯示問題

3.父元素display: inline-block

若父元素使用margin: 0 auto實現(xiàn)居中時，display: inline-block使其轉(zhuǎn)為行內(nèi)元素，導致居中效果無效。

4.父元素position: absolute or position: fixed(IE6不兼容);

使父元素脫離文檔流，清除父元素的居中效果，且對后面的div等有類似于浮動的影響。好似關(guān)了一扇窗，卻開了一道門，還是盡量不用的好。

5.父元素設置float：right or float: left
6.為父元素添加after偽類

/******IE8+或其他******/
 .clearfix:after {
     display: block;
     content: " ";
     height: 0;
     overflow: hidden;
     clear: both;
 }
OR
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
 }
/******IE6、IE7******/
.clearfix {
   *zoom: 1;
}

這樣就完了嗎？路漫漫其修遠兮！
在整理的過程中，我們應該思考一下這背后的運行原理，否則的話，這些零碎的方法依靠硬記簡直是傷害腦細胞和消磨青春的利器啊~~~

硬貨奉上，且行且珍惜，喝杯咖啡慢慢品

其實，這里主要應用了以下兩種方法：

• clear(方法1)
• IE專有的hasLayout和W3C標準下的BFC （方法2-6）
  這里主要對hasLayout和BFC（畢竟也是大咖呀）展開學習。

hasLayout

• 背景：
  在IE中，使用layout（布局）概念控制元素的尺寸和定位。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout），當一個元素有一個布局時，它負責對自己和可能的子孫元素進行尺寸計算和定位。
• 閉合內(nèi)部浮動的原理：
  通過上述背景我們了解到，當對無layout的元素觸發(fā)了hasLayout，會使其對自己和子孫元素進行計算，不管子孫元素是否存在浮動。
• 觸發(fā)hasLayout的方法：

  position: absolute
  float: left|right
  

display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE專用屬性）
writing-mode: tb-rl（IE專用屬性）
overflow: hidden|scroll|auto（只對IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只對IE 7及以上版本有效）

#####BFC（Block Formatting Context，塊級格式化上下文）
- 背景
     Block：
      box(css的基本布局單位)的一種類型，由`display: block | table | list-item`控制。     
     Formatting context：
      W3C CSS2.1 規(guī)范中的一個概念,表示頁面的一個渲染區(qū)域，包含一系列渲染規(guī)則，用來控制元素及其子元素如何定位，以及與其他元素的作用關(guān)系。
    BFC：
      一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
- BFC渲染規(guī)則
  --內(nèi)部的Box會在垂直方向，一個接一個地放置。
  -- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
  --每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
 --BFC的高度時，浮動元素也參與計算
--BFC的區(qū)域不會與float box重疊。
--BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 通過解讀上述規(guī)則，可以發(fā)現(xiàn)，BFC除了可以解決閉合浮動的問題外，還可以解決以下問題（hasLayout巧妙使用，也可以實現(xiàn)）：
--閉合浮動
--同一BFC下，margin重疊問題 
--兩欄自適應（左定寬，右自適應）
- 觸發(fā)BFC的方法（與觸發(fā)hasLayout的部分差別來源于瀏覽器版本問題）
```css
position: absolute | fixed
float: left|right
display: inline-block | table-cell | table-caption | flex | inline-flex
overflow: hidden|scroll|auto
overflow-x|-y: hidden|scroll|auto

大概就這些了，小二，結(jié)賬，下回再嘮......