BFC的特性和inline-block缝隙问题
2016-03-11 本文已影响0人
种谔
1.概念：
BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
2.什么样的元素会是BFC
- float 的值不为 none 。
- overflow 的值为 auto, scroll或 hidden 。
- display的值为 table-cell , table-caption, inline-block中的任何一个。
- position的值不为 relative 和 static 。
3.BFC的一些特点
1.如果子元素中存在浮动元素则会撑开高度和宽度来容纳浮动的子元素。
2.BFC的兄弟元素如果为浮动元素，并不会无视浮动元素的存在。
3.外边距合并的情况下，可以在要在合并的每个元素上包裹一层div，设置该div为BFC即可。
4.inline-block缝隙解决方案
- 标签与标签紧挨着写,内容可以分开.
- 设置margin-left负值.
- 给元素设置浮动.
- 元素父级设置font-size:0;自身再设置font-size:
