码迷,mamicode.com
首页 > 其他好文 > 详细

BFC(Block Formatting Context)理解

时间:2014-10-13 18:10:01      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:io   os   使用   ar   for   sp   on   html   ef   

BFC:即块级格式上下文;在创建BFC的情况下,则所属的作用环境就变成了一个独立的布局环境。 在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。 在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left) (对于从右到左的格式来说,则触碰到右边缘)。 如何创建BFC 当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context: float的值不为”none” overflow的值不为”visible” display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个 position的值不为 “static” 或 “relative”中的任何一个 我是一个使用浮动布局的孩子来的。今天才知道了这种原来也有可以不用清除浮动来布局, 只要对BFC这个概念清晰明了,完全可以不用清除浮动来布局了。

BFC(Block Formatting Context)理解

标签:io   os   使用   ar   for   sp   on   html   ef   

原文地址:http://www.cnblogs.com/lds2014/p/4022520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!