今天接触了一个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就无效了。。。。。
网友评论