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. MYSQL SQL 语句修改字段默认值

    alter table tablename alter column drop default; (若本身存在默认值,则先删除) alter table tablename alter column ...

  2. java处理csv文件上传示例

    前言:示例只是做了一个最最基础的上传csv的示例,如果要引用到代码中去,还需要根据自己的业务自行添加一些逻辑处理. ReadCsvUtil工具类 package com.hanfengyeqiao.g ...

  3. 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（11.0）- FlexSPI NOR启动时间(RT1170)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT1170 FlexSPI NOR启动时间. 痞子衡刚刚拿到i.MXRT1170 B0版本的芯片,迫不及待地在上面跑了 ...

  4. range用法（倒序取值）

    range(4,-1,-1) #倒数取值 ''' start: 计数从 start 开始.默认是从 0 开始.例如range(5)等价于range(0, 5); stop: 计数到 stop 结束,但 ...

  5. Spring Cloud 系列之 Dubbo RPC 通信

    Dubbo 介绍 官网:http://dubbo.apache.org/zh-cn/ Github:https://github.com/apache/dubbo 2018 年 2 月 15 日,阿里 ...

  6. vs.net/vscode中使用Beetlex创建vue应用

    平时在开发Vue应用则需要安装nodejs,vue cli等相关东西相对来说麻烦一些:如果你喜欢像vs.net/vscode创建普通项目一样就能开发Vue项目的话那可以尝试一下BeetleX针对Vue ...

  7. 4.kubernetes的服务发现插件-CoreDNS

    1.1.部署K8S内网资源清单http服务 1.2.部署coredns 部署K8S内网资源清单http服务 在运维主机HDSS7-200.host.com上,配置一个nginx虚拟主机,用以提高k8s ...

  8. 【vue】axios二次封装，更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  9. Zookeeper面试专题

    Zookeeper面试专题 1. Zookeeper是什么框架 分布式的.开源的分布式应用程序协调服务,原本是Hadoop.HBase的一个重要组件.它为分布式应用提供一致性服务的软件,包括:配置维护 ...

  10. 网站搬家之mysql 5.7 date类型默认值不能设置‘0000-00-00’的问题

    网站搬家,mysql版本由5.6升级到5.7,遇到问题: mysql 5.7之后版本datetime默认值设置'0000-00-00',出现异常:Invalid default value for ' ...