Demo 1: 問parent的高度？（高度等於100px而不包含margin100px）
<div id='parent'>
<div id='child' style="width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
</div>Demo 2: 問child1和child2的間距？（間距取兩個兄弟dom之前的最大值，也就是200px）
<div id='parent'>
<div id='child1' style="width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
<div id='child2' style="width: 100px; height: 100px; background: lightblue; margin: 200px;"></div>
</div>Demo 3： 文本在float流的時候流淌
<section>
<div style="float: left; width: 100px; height: 100px; background: pink;"></div>
<div style="fwidth: 200px; height: 200px; background: gray;" style="overflow:auto">
fdajlf jals fjlkasj flasj lfkjas lkj laksfj las
fas jflkaj slfj alsjf lasjfl ajslfj lasf
f aslj asl jflasj flkasjfl kjaslf jaslj flas
fal sjflaskj flasj flkasj lfjaslk jflasjfla js
f laskjflaskjflkajslfk jaslkfj asljflk as
</div>
</section>對應效果：
Demo 4: 問parent的高度？（高度等於0，浮動元素不參與高度計算）
<div id='parent'>
<div id='child' style="width: 100px; height: 100px; background: lightblue; margin: 100px; float:left; "></div>
</div>一. BFC 是什麼？
有了上面的基礎後，可以正式介紹 BFC 了。從樣式上看，具有 BFC 的元素與普通的容器沒有什麼區別，但是從功能上，具有 BFC 的元素可以看作是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素，上文中的第二類清除浮動的方法（如 overflow 方法）就是觸發了浮動元素的父元素的 BFC ，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。
簡單來說，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互作用。
二.BFC佈局規則：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。(正常float是不參與高度計算的)
5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
三.BFC觸發屬性
1.body 根元素
2.浮動元素：float 除 none 以外的值
3.絕對定位元素：position (absolute、fixed)
4.display 爲 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
Demo 5: 問parent的高度？（高度等於200px,包含margin100px）
<div id='parent' style='overflow:hidden;'>
<div id='child' style=" width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
</div>Demo 6: 問child1和child2的間距？（創建一個BFC容器包裹受影響的元素，間距取兩個兄弟dom之和，也就是200px）
<div id='parent'>
<div style='overflow:hidden;'>
<div id='child1' style="width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
</div>
<div id='child2' style="width: 100px; height: 100px; background: lightblue; margin: 100px; "></div>
</div>Demo 7：文本在float流的時候依舊保持左右佈局，將流淌文本parent添加overflow:auto，使其成爲BFC佈局
<section>
<div style="float: left; width: 100px; height: 100px; background: pink;"></div>
<div style="fwidth: 200px; height: 200px; background: gray; overflow:auto; " style="overflow:auto">
fdajlf jals fjlkasj flasj lfkjas lkj laksfj las
fas jflkaj slfj alsjf lasjfl ajslfj lasf
f aslj asl jflasj flkasjfl kjaslf jaslj flas
fal sjflaskj flasj flkasj lfjaslk jflasjfla js
f laskjflaskjflkajslfk jaslkfj asljflk as
</div>
</section>
Demo 8: 問parent的高度？（用float屬性將parent轉化成BFC容器，高度等於300，浮動元素將參與高度計算）
<div id='parent' style="float: left;">
<div id='child' style="width: 100px; height: 100px; background: lightblue; margin: 100px; float:left; "></div>
</div>
