BFC浅谈

# 一:什么是BFC?

在W3C规范中,浮动元素和绝对定位元素,非块级盒子的块级容器(例如:inline-block, table-ceils和table-captions),以及overflow值不为“visiable”的块级元素,都会为他们的内容创建新的BFC,就是block formatting context的缩写(块级格式上下文)。

在一个块级格式上下文中,盒模型在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直由‘margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。

在一个块格式化上下文中,每个盒的left外边挨着包含块的left边。即使存在浮动,这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)

总而言之:BFC内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。

# 二. BFC的功能。

功能一:用BFC包住浮动元素。

功能二:兄弟之间划清界限。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 先前在学习CSS float时,有同学提到了BFC这个词,作为求知好问的好学生,哪里不懂查哪里,那么今天就来研究一...
    这名字真不对阅读 6,599评论 3 19
  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    陌客百里阅读 539评论 3 4
  • 转载自(http://web.jobbole.com/83274/) BFC BFC全称是Block Format...
    居客侠阅读 2,174评论 0 20
  • BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于C...
    xf0128阅读 377评论 0 0