BFC的概念

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

它是一个独立的渲染区域，只有块级元素参与，它规定了内部的Block level Box如何布局，并且与这个区域外部好不相干。

BFC能解决的问题

  1. 浮动定位
  2. 消除外边距折叠
  3. 清除浮动
  4. 自适应多栏布局
  5. ...

BFC的创建

下列方式会创建BFC

  1. 根元素或包含根元素的元素
  2. 浮动元素(float不为none)
  3. 绝对定位元素(position为absolute或者fixed)
  4. display为inline-block,table-cell,table-caption
  5. overflow值不为visible
  6. 弹性元素(flex布局)
  7. 网格元素(grid布局)

BFC的约束规则

  • 内部的Box会在垂直方向上一个接一个的放置
  • 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
  • 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC的应用

  1. 防止margin重叠

    <body>
    
    <p>top</p>
    
    <p>bottom</p>
    
</body>

<style>
    
p {
    
    width: 100px;
    
    height: 100px;
    
    background: yellow;
    
    line-height: 100px;
    
    margin: 10px;
    
    text-align: center;
    
}
    
</style>

    展现效果：

    两个div中间的间距为10px,而不是20px,因为它们处于同一个BFC

    解决方案为给第二个div再包一层div，设置其overflow属性,使它们处于不同的BFC：

    <body>
    
    <p>top</p>
    
    <div>
    
        <p>bottom</p>
    
    </div>
    
</body>
    
<style>
    
p {
    
    width: 100px;
    
    height: 100px;
    
    background: yellow;
    
    line-height: 100px;
    
    margin: 10px;
    
    text-align: center;
    
}

div    {
    
    overflow: auto;
    
}

</style>

    效果：

  2. 让浮动内容与周围内容等高

    看如下例子：

    <div class="box">
    
    <div class="float">浮动元素</div>
    
    <p>未浮动元素</p>
    
</div>
    
<style>
    
.box {
    
    background-color: rgb(224, 206, 247);
    
    border: 5px solid rebeccapurple;
    
}

.float {
    
    float: left;
    
    width: 200px;
    
    height: 150px;
    
    background-color: white;
    
    border:1px solid black;
    
    padding: 10px;
    
}      

</style>

    产生的效果：

    由于浮动，使得浮动元素的高度高于旁边的元素，解决方式为使父box生成一个BFC，如下：

    <div class="box">
    
    <div class="float">浮动元素</div>
    
    <p>未浮动元素</p>
    
</div>
    
<style>
    
.box {
    
    background-color: rgb(224, 206, 247);
    
    border: 5px solid rebeccapurple;
    
    overflow: auto;
    
}

.float {
    
    float: left;
    
    width: 200px;
    
    height: 150px;
    
    background-color: white;
    
    border:1px solid black;
    
    padding: 10px;
    
}      

</style>

    效果如下：

BFC原理解析的更多相关文章

  1. CSS—BFC原理解析与应用

    我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...

  2. [原][Docker]特性与原理解析

    Docker特性与原理解析 文章假设你已经熟悉了Docker的基本命令和基本知识 首先看看Docker提供了哪些特性: 交互式Shell:Docker可以分配一个虚拟终端并关联到任何容器的标准输入上, ...

  3. 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现

    本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...

  4. Web APi之过滤器执行过程原理解析【二】（十一）

    前言 上一节我们详细讲解了过滤器的创建过程以及粗略的介绍了五种过滤器,用此五种过滤器对实现对执行Action方法各个时期的拦截非常重要.这一节我们简单将讲述在Action方法上.控制器上.全局上以及授 ...

  5. Web APi之过滤器创建过程原理解析【一】（十）

    前言 Web API的简单流程就是从请求到执行到Action并最终作出响应,但是在这个过程有一把[筛子],那就是过滤器Filter,在从请求到Action这整个流程中使用Filter来进行相应的处理从 ...

  6. GeoHash原理解析

    GeoHash 核心原理解析       引子 一提到索引,大家脑子里马上浮现出B树索引,因为大量的数据库(如MySQL.oracle.PostgreSQL等)都在使用B树.B树索引本质上是对索引字段 ...

  7. alibaba-dexposed 原理解析

    alibaba-dexposed 原理解析 使用参考地址: http://blog.csdn.net/qxs965266509/article/details/49821413 原理参考地址: htt ...

  8. 支付宝Andfix 原理解析

    支付宝Andfix 原理解析 使用参考地址: http://blog.csdn.net/qxs965266509/article/details/49802429 原理参考地址: http://blo ...

  9. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

随机推荐

  1. 浅谈Unity的脚本执行顺序

    一.添加脚本的顺序 这是一张官方的脚本顺序图 一般,当我们把脚本绑定在游戏对象上时,或者点击绑定好的脚本的reset按钮时,会调用Reset() 当我们初始化一个对象时,会先调用Awake()在调用O ...

  2. .net core3.1 abp动态菜单和动态权限（动态菜单实现和动态权限添加） （三）

    我们来创建动态菜单吧 首先,先对动态菜单的概念.操作.流程进行约束:1.Host和各个Tenant有自己的自定义菜单2.Host和各个Tenant的权限与自定义菜单相关联2.Tenant有一套默认的菜 ...

  3. Kubernetes-subpath的使用

    一.什么是subpath 为了支持单一个pod多次使用同一个volume而设计,subpath翻译过来是子路径的意思,如果是数据卷挂载在容器,指的是存储卷目录的子路径,如果是配置项configMap/ ...

  4. Hadoop + Hive + HBase + Kylin伪分布式安装

    问题导读 1. Centos7如何安装配置? 2. linux网络配置如何进行? 3. linux环境下java 如何安装? 4. linux环境下SSH免密码登录如何配置? 5. linux环境下H ...

  5. 【JMeter_11】JMeter逻辑控制器__Switch控制器<Switch Controller>

    Switch控制器<Switch Controller> 业务逻辑: 取得switch value的值,通过对节点下所有取样器.逻辑控制器的下标.名称匹配去执行,switch value的 ...

  6. c++ cc24a_demo //转换函数，用来做转换操作符,int()括号里面必须是空的，必须定义为const,代码示范

    c++ cc24a_demo //转换函数,用来做转换操作符,int()括号里面必须是空的,必须定义为const,代码示范 #include <iostream> #include < ...

  7. arduino连接12864LCD方法

    arduino连接12864LCD方法,参考相关代码. https://blog.csdn.net/txwtech/article/details/95038386

  8. EPLAN文本输入怎么转行,路径功能文本换行方法

    EPLAN文本输入怎么转行,路径功能文本换行方法 在输入文本时,按CTRL+ENTER可以将字体换行 Ctrl+回车键

  9. jwt 工具类

    public class TokenUtils { private Logger logger = LoggerFactory.getLogger(this.getClass()); /** * 签名 ...

  10. 并发编程-CPU执行volatile原理探讨-可见性与原子性的深入理解

    volatile的定义 Java语言规范第3版中对volatile的定义如下:Java编程语言允许线程访问共享变量,为了确保共享变量能被准确和一致地更新,线程应该确保通过排他锁单独获得这个变量.Jav ...