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. monkey命令的基本使用

    看到monkey,你想到了什么?今天给大家分享下monkey命令的基本使用 monkey测试是Android平台自动化测试的一种手段,通过monkey程序模拟用户触摸屏幕,滑动.按键操作等操作对设备上 ...

  2. 君荣一卡通软件mysql转sqlserver 教程

    Mysql数据库转sql数据库方法 注意:新建的SQL数据库一得先登录一次后再做迁移!!!!特别注意 如果客户以前安装的是mysql数据库,现在希望把mysql数据库转换的sql数据库,方法如下: 1 ...

  3. python下载及安装步骤

    Python安装 1.浏览器打开网址:www.python.org 2.根据电脑系统选择下载 3.确定电脑系统属性,此处我们以win10的64位操作系统为例 4.安装python 3.6.3 双击下载 ...

  4. python生成批量格式化字符串

    在学习tensorflow管道化有关操作时,有一个操作是先生成一个文件名队列.在书上使用了这样的代码: filenames = ['test%d.txt'%i for in in range(1,4) ...

  5. python基础内容整理（一）

    基本数据类型 字符串 String 字符串是不可变类型 字符串的分割: s.split(sep)以给定的sep为分隔符对s进行分割. In [4]: s = "hello world&quo ...

  6. npm设置为淘宝镜像地址

    1. npm设置为淘宝镜像 $npm config set registry https://registry.npm.taobao.org 2. 检查一下 $npm config get regis ...

  7. Spring事务方法上增加synchronized真的有效果吗？

    此文转载,Spring事务本身是一个非常复制的问题,再加上线程并发处理就更加要主要了,由于再开发中有很多朋友会范与下文同样的错误,因分享给大家. 前言 Spring事务的一个奇怪的问题. 朋友问了我一 ...

  8. CSV文件导入到数据库中读取数据详解(接着上个帖子)

    一.controller层 二.SERVICE层 @Overridepublic Result importJinjiangAssessResult(MultipartFile file) throw ...

  9. Redis：缓存淘汰策略

    将redis用做缓存是一种非常常见的手段,然而由于内存大小的限制,会导致redis在内存空间满了以后需要处理继续存入的数据.总计有以下几种策略: volatile-ttl:在设置了过期时间的数据集里, ...

  10. php计算两个时间段内的 工作日 工作小时

    <?php class WorkTime { // 定义工作日 [1, 2, 3, 4, 5, 6, 0] public $week_workingday = [1, 2, 3, 4, 5]; ...