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. Linux系统管理——Linux简介

    UNIX与Linux发展史 UNIX发展历史 1.1965年,美国麻省理工学院(MIT),通用电气公司(GE)及AT&T的贝尔实验室联合开发Multics工程计划,其目标是开发一种交互式的具有 ...

  2. Python第三方库 - 安装

    目录 1. 代码格式化 1.1. autopep8 1.2. YAPF 1.3. docformatter 2. 视觉相关 2.1. pyzbar, 条码(二维码)识别 2.2. tesserocr ...

  3. LAMP建站简介

    1. LAMP概述 1.1 为什么是LAMP LAMP无非就是Linux+Apache+MySQL+PHP的网站架构体系而已.而之所以叫LAMP,就是取了这几个单词的首字母罢了,但这里的P可以指PHP ...

  4. Python函数&异常处理

    1. 函数基础 1.1 参数和返回值 1.1.1 参数 位置参数.关键字参数 def my_func1(x, y, z): print(x+y+z, "计算结束") my_func ...

  5. 富文本插件tinymce初始化配置参数说明

    { language: _this.language, // 显示语种 selector: #${_this.tinymceId}, // 容器的id height: _this.height, // ...

  6. 关于 JOIN 耐心总结，学不会你打我系列

    现在随着各种数据库框架的盛行,在提高效率的同时也让我们忽略了很多底层的连接过程,这篇文章是对 SQL 连接过程梳理,并涉及到了现在常用的 SQL 标准. 其实标准就是在不同的时间,制定的一些写法或规范 ...

  7. 多页面共用sessionStorage的实现（转载）

    sessionStorage的局限: sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多个标 ...

  8. Merge，Rebase，Cherry-Pick 一文解惑

    代码合并在日常开发中是较为常见的场景,采用合适的合并方式,可以起到事半功倍的效果.对应在 Git 中合并的方式主要有三个,Merge,Rebase,Cherry-Pick. 开始部分会首先介绍一下这三 ...

  9. Alink漫谈(八) : 二分类评估 AUC、K-S、PRC、Precision、Recall、LiftChart 如何实现

    Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Precision.Recall.LiftChart 如何实现 目录 Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Pre ...

  10. 入门大数据---SparkSQL常用聚合函数

    一.简单聚合 1.1 数据准备 // 需要导入 spark sql 内置的函数包 import org.apache.spark.sql.functions._ val spark = SparkSe ...