首页 > Web开发 > 详细

CSS之BFC

时间:2017-04-29 10:33:49      阅读:220      评论:0      收藏:0      [点我收藏+]

BFC(Block Formatting Context,块格式上下文)

具有BFC特性的元素能够看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素。

在CSS3中。BFC叫做Flow Root。

在CSS2.1中。有三种定位方案——普通流(Normal Flow),浮动(Float)和绝对定位(Absolute Positioning)。


(1)怎样触发BFC?

   下列情况将创建一个BFC环境:

(a)浮动(元素的float非none)

(b)绝对定位元素(元素的position为absolute或fixed)

(c)display为inline-block, table-cell, table-caption, flex, inline-flex

(d)overflow非visible(为hidden,auto,scroll)


(2)BFC有什么特性?

(a)BFC会阻止竖直margin的折叠

          假设两个块级元素相邻且在同一个BFC环境时,它们竖直方向之间的margin(margin-bottom与margin-top)会发生折叠(塌陷)。

而假设它们不在同一个BFC下。则不会折叠。

(b)BFC能够”包容“浮动元素

          BFC会依据子元素的情况自己主动调整高度。即使其子元素中包括浮动元素

(c)BFC能够阻止元素被浮动元素覆盖



CSS之BFC

原文:http://www.cnblogs.com/gavanwanggw/p/6784589.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!