皇帝的金斧頭
我基本對(duì)css沒有系統(tǒng)的學(xué)習(xí)受啥，都是在平常中寫html與js中積累下來的知識(shí)躲履，如有錯(cuò)誤念秧，希望能提出淤井，同時(shí)有疑惑可以交流，下文是我看了4天bfc中濃縮的觀點(diǎn)。
布局的思考
布局主要通過定位體系實(shí)現(xiàn)币狠，定位體系決定著框的擺放游两。一門語言就像一種工具，不但能干活漩绵，人用著得舒服贱案，總不能制作一個(gè)扳手，你往左扳止吐，螺絲向右旋吧宝踪。
對(duì)css的定位體系來說，三種定位方式就是工具碍扔，使框能擺放到需要的位置瘩燥，實(shí)現(xiàn)了布局，常規(guī)流定位使元素自動(dòng)流動(dòng)到所需位置不同，浮動(dòng)使周圍元素環(huán)繞厉膀，絕對(duì)定位硬性規(guī)定元素的位置。通過定位機(jī)制二拐，元素能擺放到某個(gè)位置服鹅。這是能干活了，但是百新，有時(shí)候用著卻不舒服企软。
如圖1-1，發(fā)現(xiàn)box_2的布局與box_1存在了margin吟孙，但是也受到box子元素inner的影響澜倦。這個(gè)就不符合人類直覺了，明明代碼存在了層次關(guān)系杰妓，但實(shí)現(xiàn)時(shí)子元素作為浮動(dòng)元素藻治，溢出了父元素的框架，對(duì)頁面其他元素造成影響巷挥。所以必須對(duì)定位體系進(jìn)行改進(jìn)以實(shí)現(xiàn)可控且清晰的布局桩卵。所以就引入了bfc的概念，在很多文章中都是把bfc形容成一個(gè)容器倍宾，容器內(nèi)外元素互不干擾雏节。所以進(jìn)行容器布局時(shí)，只需考慮父子高职、兄弟關(guān)系了钩乍，
以下是一些個(gè)人分析，適合有bfc基礎(chǔ)的同學(xué)思考怔锌。
我認(rèn)為規(guī)則就只有兩點(diǎn)：
1寥粹、bfc元素是容器变过，那必定會(huì)產(chǎn)生隔離，隔離是對(duì)子元素的隔離涝涤，所以子元素的margin不與容器margin合并媚狰；
2、bfc不會(huì)發(fā)生框重疊阔拳；兄弟關(guān)系的兩個(gè)bfc崭孤，如果其中存在浮動(dòng)框，就左右擺放糊肠，如果是父子關(guān)系的兩個(gè)bfc辨宠，就通過包含關(guān)系，所以這就是bfc能計(jì)算框內(nèi)浮動(dòng)元素高度的原因了罪针。
其他bfc的規(guī)則彭羹，你不難發(fā)現(xiàn)其實(shí)是常規(guī)流的布局規(guī)則，因?yàn)閎fc也是屬于常規(guī)流泪酱，繼承規(guī)則的同時(shí)進(jìn)行了擴(kuò)展派殷。
可能有些同學(xué)對(duì)bfc的margin合并存在理解的偏差，可看如何解決外邊距疊加的問題這個(gè)討論墓阀，一定要看評(píng)論的內(nèi)容毡惜，看完基本不難理解bfc與margin合并這兩個(gè)概念了。
每日小問
2016年1月1日23:15:06
#div1{width: 200px; height: 200px;overflow:hidden;margin:20px;background:#AA0;}
#div2{width:200px; height: 200px;overflow:hidden;margin:20px;background:#0AA;}
<div id='div1'></div>
<div id='div2'></div>
這里兩個(gè)div間距離多少斯撮，為什么经伙？
#container{width: 300px;height: 300px;float: left;}
#div1{width: 200px; height: 200px;float: left;;margin:20px;background:#AA0;}
#div2{width:200px; height: 200px;float: left;;margin:20px;background:#0AA;}
<div id='container'>
<div id='div1'></div>
<div id='div2'></div>
</div>
這里兩個(gè)div間距離多少，為什么勿锅？
答案在明天的文章中帕膜。
歡迎指出文章的錯(cuò)誤，如有對(duì)文章觀點(diǎn)有疑惑希望能提出互相交流溢十。
