CSS的BFC理解和应用

今天接触了一个CSS的BFC概念，这不是个新东西，反而是老早就有的，BFC平时也经常使用，是自己没有系统的概念。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

这是引用大神的总结，通俗易懂又精准，本文算是该文章的读书笔记。张鑫旭CSS深入理解流体特性和BFC

总的来说，实现BFC的方法有不少，但由于前端发展迅猛，很多方法都随着ie老版本的淘汰也不实用了。剩下有比较实用的两种方法：

一个就是 overflow:hidden ；

一个就是 display:table-cell 加 width:9999px ；

这个两个在实现自身流体特征（内容区域会随着margin, padding, border的出现自动填满剩余空间）的情况下，还能自适应布局。

overflow:hidden 就不用多说了，平时用的很多，以前我的理解就是包裹浮动元素，和其他标签分清界限，其实这就算是BFC的概念。这次看张大神的文章，一来是清晰了这个概念，第二个就是学会了第二种BFC的方法。
overflow:hidden 在子标签有超出父容器的情况下是用不了的，会把子标签部分隐藏掉，以前我就遇上过这种问题，我都忘了是怎么处理的。如：

`.con{
    width:500px;
    border:1px solid blue;
    padding:20px;
}
.fl{
    float: left;
    width:200px;
    border:1px solid red;
}
.bfc{
    border:1px solid yellow;
    overflow:hidden;
    position: relative;
}
.child{
    width:100px;
    height: 100px;
    background: #000;
    color:#fff;
    position: absolute;
    top:100px;
    left:100px;
}`

如图是看不到子标签的，而如果换成display:table-cell就可以了:

.bfc{ border:1px solid yellow; display: table-cell; width:9999px; position: relative; }

至于width:9999px是为了自适应，占满剩余的空间，因为table-cell的特性设定100%是没用的，而cell另一个属性就是不管你设定多宽，它都不会超出外容器的宽。但是当标签加上dispaly:table-cell后，margin就无效了。。。。。