BFC 块级格式化上下文

BFC(block formatting context)一种布局方式

特性

  1. BFC内部的Box会在垂直方向,从顶部开始一个接一个地放置。

  2. Box垂直方向的距离由margin决定,同一个BFC的两个相邻Box的margin会发生叠加

  3. 元素的margin-left与包含块的border-left相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  4. BFC的区域不会与浮动的元素叠加。

  5. BFC是页面上一个独立的容器,容器里的元素不会影响到外面的元素,反之亦然。

  6. 计算BFC的高度时,浮动元素也参与计算。

激活BFC

  1. float (值不为none的float。)

  2. overflow (值不为visible的overflow。)

  3. display (值为table-cell、table-caption、inline-block中的任何一个。)

  4. position (值不为relative和static的position。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容