前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布

BFC

作者头像
pitaojin
发布2018-05-25 16:46:02
4370
发布2018-05-25 16:46:02
举报

一、前言

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。

二、正文

下面介绍触发BFC及BFC带来的影响

2.1、触发BFC

代码语言:javascript
复制
 只要元素满足下面任一条件即可触发 BFC 特性:
    * body 根元素
    * 浮动元素:float 除 none 以外的值
    * 绝对定位元素:position (absolute、fixed)
    * display 为 inline-block、table-cells、flex
    * overflow 除了 visible 以外的值 (hidden、auto、scroll)

2.2、BFC的特性及应用

  1. 同一个 BFC 下外边距会发生折叠
2
2
1-3
1-3

解释:因为两个div都处在body这个BFC容器中,如果要避免这种问题可以把这两个div放在两个容器中

  1. BFC 可以包含浮动的元素(清除浮动)
4-1
4-1
3-1
3-1

因为浮动元素脱离了文档流,所以容器只剩下2px的高,但是将容器变成BFC,添加代码overflow:hidden,就可以包含浮动元素了。

  1. BFC 可以阻止元素被浮动元素覆盖(就不举例子了)
  2. BFC自适应布局模块间的间距(参考链接)

2.3、总结BFC的布局规则

代码语言:javascript
复制
        1、内部的Box会在垂直方向,一个接一个地放置。
        2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
        3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
        4、BFC的区域不会与float box重叠。
        5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
        6、计算BFC的高度时,浮动元素也参与计算

总结

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

参考链接

深入理解BFC

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.04.27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、前言
  • 二、正文
    • 2.1、触发BFC
      • 2.2、BFC的特性及应用
        • 2.3、总结BFC的布局规则
        • 总结
          • 参考链接
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档