作為前端的好孩子，總會(huì)遇到一個(gè)經(jīng)典不朽的問題：有幾種閉合內(nèi)部浮動(dòng)的方法悦陋？哈哈蜈彼，是不是想說這個(gè)能難得住我？馬上能列出個(gè)123：
開胃小菜俺驶，拈來嘗嘗
1.在最后一個(gè)浮動(dòng)元素的下面添加空白標(biāo)簽
???? <div style = "clear:both"></div>or
???? <br clear = "all">
2.父元素overflow: hidden
IE 6不支持;一旦子元素的大小超過父容器的大小柳刮，就會(huì)出顯示問題
3.父元素display: inline-block
若父元素使用
margin: 0 auto實(shí)現(xiàn)居中時(shí)，display: inline-block使其轉(zhuǎn)為行內(nèi)元素痒钝，導(dǎo)致居中效果無效秉颗。
4.父元素position: absolute or position: fixed(IE6不兼容);
使父元素脫離文檔流，清除父元素的居中效果送矩，且對后面的div等有類似于浮動(dòng)的影響蚕甥。好似關(guān)了一扇窗，卻開了一道門栋荸，還是盡量不用的好菇怀。
5.父元素設(shè)置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;
}
這樣就完了嗎晌块？路漫漫其修遠(yuǎn)兮爱沟！
在整理的過程中，我們應(yīng)該思考一下這背后的運(yùn)行原理匆背，否則的話呼伸，這些零碎的方法依靠硬記簡直是傷害腦細(xì)胞和消磨青春的利器啊~~~
硬貨奉上，且行且珍惜钝尸，喝杯咖啡慢慢品
其實(shí)括享，這里主要應(yīng)用了以下兩種方法：
clear(方法1)-
IE專有的hasLayout和W3C標(biāo)準(zhǔn)下的BFC （方法2-6）
這里主要對hasLayout和BFC（畢竟也是大咖呀）展開學(xué)習(xí)搂根。
hasLayout
- 背景：
在IE中，使用layout（布局）概念控制元素的尺寸和定位铃辖。當(dāng)一個(gè)元素的 hasLayout屬性值為true時(shí)剩愧，我們說這個(gè)元素有一個(gè)布局（layout），當(dāng)一個(gè)元素有一個(gè)布局時(shí)娇斩，它負(fù)責(zé)對自己和可能的子孫元素進(jìn)行尺寸計(jì)算和定位仁卷。 - 閉合內(nèi)部浮動(dòng)的原理：
通過上述背景我們了解到，當(dāng)對無layout的元素觸發(fā)了hasLayout犬第，會(huì)使其對自己和子孫元素進(jìn)行計(jì)算锦积，不管子孫元素是否存在浮動(dòng)。 - 觸發(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ī)范中的一個(gè)概念,表示頁面的一個(gè)渲染區(qū)域遥椿，包含一系列渲染規(guī)則，用來控制元素及其子元素如何定位淆储，以及與其他元素的作用關(guān)系冠场。
BFC：
一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與本砰， 它規(guī)定了內(nèi)部的Block-level Box如何布局碴裙，并且與這個(gè)區(qū)域外部毫不相干。
- BFC渲染規(guī)則
--內(nèi)部的Box會(huì)在垂直方向点额，一個(gè)接一個(gè)地放置舔株。
-- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
--每個(gè)元素的margin box的左邊还棱， 與包含塊border box的左邊相接觸(對于從左往右的格式化载慈，否則相反)。即使存在浮動(dòng)也是如此珍手。
--BFC的高度時(shí)办铡，浮動(dòng)元素也參與計(jì)算
--BFC的區(qū)域不會(huì)與float box重疊。
--BFC就是頁面上的一個(gè)隔離的獨(dú)立容器琳要，容器里面的子元素不會(huì)影響到外面的元素寡具。反之也如此。
- 通過解讀上述規(guī)則稚补，可以發(fā)現(xiàn)童叠，BFC除了可以解決閉合浮動(dòng)的問題外，還可以解決以下問題（hasLayout巧妙使用课幕，也可以實(shí)現(xiàn)）：
--閉合浮動(dòng)
--同一BFC下拯钻，margin重疊問題
--兩欄自適應(yīng)（左定寬帖努，右自適應(yīng)）
- 觸發(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é)賬拼余，下回再嘮......
