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. 需要加token验证的接口返回文件流下载

    没有加token之前,下载文件用的是a标签,直接下载. 现在要求是需要在header中加入token. getDownload(urls, fileName) { var url = urls; va ...

  2. WIN10下如何解决PL2303驱动不可用的问题或者com口显示黄色感叹号usb-to-serial

    WIN10下如何解决PL2303驱动不可用的问题或者com口显示黄色感叹号usb-to-serial

  3. webpack简单笔记

    本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间 安装 可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...

  4. 定量度量程序复杂度的McCabe方法

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 请画出下面代码的 ...

  5. java scoket aIO 通信

    AsynchronousServerSocketChannel assc.accept(this, new ServerCompletionHandler()); 第一个参数是服务器的处理类,第二个参 ...

  6. 搞定ReentrantReadWriteLock 几道小小数学题就够了

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  7. 实战：IDEA运行速度调优

    序言 可能大家觉得系统调优一般都是针对服务端应用而言的,普通Java开发人员很少有机会实践.今天就通用一个Java开发人员日常工作中经常使用的开发工具开做一次调优实战. 我在日常工作中的主要IDE工具 ...

  8. python变量拷贝

    写python代码时候,如:A = 0,B = A,B = 1, 有时候会发现A变成了1,那么怎么办呢? 以下是伪代码: import copy ... X_ = copy.copy(X) ... 这 ...

  9. SQL语句中where 1=1的意义

    我们在看别人项目的时候,很多时候看到这样的SQL语句: select * from user where 1=1 其中这个where1=1是有特殊意义的,包含以下两种情境:动态SQL拼接和查询表结构. ...

  10. [USACO11JAN]Roads and Planes G【缩点+Dij+拓补排序】

    题目 Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇 (1 <= T <= 25,000),编号为1T.这些城镇之间通过R条道路 (1 < ...