皇帝的金斧头
我基本对css没有系统的学习，都是在平常中写html与js中积累下来的知识，如有错误，希望能提出，同时有疑惑可以交流，下文是我看了4天bfc中浓缩的观点。
布局的思考
布局主要通过定位体系实现，定位体系决定着框的摆放。一门语言就像一种工具，不但能干活，人用着得舒服，总不能制作一个扳手，你往左扳，螺丝向右旋吧。
对css的定位体系来说，三种定位方式就是工具，使框能摆放到需要的位置，实现了布局，常规流定位使元素自动流动到所需位置，浮动使周围元素环绕，绝对定位硬性规定元素的位置。通过定位机制，元素能摆放到某个位置。这是能干活了，但是，有时候用着却不舒服。
图1-1
图片1-1
如图1-1，发现box_2的布局与box_1存在了margin，但是也受到box子元素inner的影响。这个就不符合人类直觉了，明明代码存在了层次关系，但实现时子元素作为浮动元素，溢出了父元素的框架，对页面其他元素造成影响。所以必须对定位体系进行改进以实现可控且清晰的布局。所以就引入了bfc的概念，在很多文章中都是把bfc形容成一个容器，容器内外元素互不干扰。所以进行容器布局时，只需考虑父子、兄弟关系了，
以下是一些个人分析，适合有bfc基础的同学思考。
我认为规则就只有两点：
1、bfc元素是容器，那必定会产生隔离，隔离是对子元素的隔离，所以子元素的margin不与容器margin合并；
2、bfc不会发生框重叠；兄弟关系的两个bfc，如果其中存在浮动框，就左右摆放，如果是父子关系的两个bfc，就通过包含关系，所以这就是bfc能计算框内浮动元素高度的原因了。
其他bfc的规则，你不难发现其实是常规流的布局规则，因为bfc也是属于常规流，继承规则的同时进行了扩展。
可能有些同学对bfc的margin合并存在理解的偏差，可看如何解决外边距叠加的问题这个讨论，一定要看评论的内容，看完基本不难理解bfc与margin合并这两个概念了。
每日小问
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>
这里两个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>
这里两个div间距离多少，为什么？
答案在明天的文章中。
欢迎指出文章的错误，如有对文章观点有疑惑希望能提出互相交流。
网友评论