你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

可视化格式模型-BFC

行为 练习 15695浏览 6评论

在常规流中的框(boxes,元素形成的矩形区域),都属于一个格式化的上下文中,可能是块的,也可能是行内的,但不可能同时是行内的又是块的。块框参与块格式化上下文。行内框参与行内格式化上下文。

块格式化上下文(Block formatting contexts)
有的资料上将 context 翻译成 “内容”。在这里,之所以把context翻译成“上下文”,是因为,它强调框存在的环境。所谓上下文,有活动范围,有效区域的意思。

如何触发
浮动元素,绝对定位元素,inline-blocks,table-cells,table-captions,以及 ‘overflow’不是 ‘visible’的元素,会创建新的block formatting context。

在CSS3中,对这个概念做了改动,CSS3中,将Block formatting context 叫做 flow root。对于触发方式也做了修改。(http://www.w3.org/TR/css3-box/#block-level0

它做了什么

这也是一个比较抽象的概念。可以把它想象成一个大箱子,里面装着很多元素,箱子可以隔开里面的元素和外面的元素。好像JS中的闭包,保护其中的元素。它可以包含浮动元素,可以阻止margin折叠,可以防止元素被浮动元素覆盖……

块格式化内容是个重要的概念,它对宽高的计算,margin折叠,定位等都有一定的影响。后续会有详细的说明。

在块格式化上下文中,框会一个接一个地被垂直放置,它们的起点是一个包含块的顶部。两个兄弟框之间的垂直距离取决于’margin’属性。在block formatting context中相邻的块级元素的垂直边距会折叠(collapse)。

在块格式化上下文中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的block formatting context。

现实意义

Block formatting context 表现的很像普通的块框,那么它比较特殊的地方在哪里呢?
1. 可以包含浮动元素
2. 不被浮动元素覆盖
3. 阻止父子元素的 margin 折叠

另外,Block formatting context 的特性在某些地方像 IE 中的 hasLayout

转载请注明:练小习的前端技术笔记 » 可视化格式模型-BFC

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (6)

  1. 打破零评论
    小轩3年前 (2017-11-28)回复
  2. 不错的效果,但图片不显示,有竖状模式吗?
    scriptlover12年前 (2009-01-17)回复
  3. 挺好的,不知道要怎么加到相关功能里,我是说比如评分啊什么的
    reishi13年前 (2008-02-01)回复
  4. 图片路径是错的呵呵,大家自己做个放上就OK了,而且不只是滑动效果,还可以得到值的
    练习13年前 (2008-01-23)回复
  5. 嗯 很不错 受教了!
    Soku13年前 (2008-01-22)回复
  6. 很好的效果,赞一个。不过滑动条的图片看不到哦
    chada13年前 (2008-01-22)回复