为什么需要BFC?

<style>

  .red {

    background: red;

  }

  .blue {

    background: #1890ff;

  }

  .green {

    background: green;

  }

  p {

    margin: 20px 0;

  }

</style>

<body>

    <p class="red">1</p>

    <p class="blue">2</p>

    <p class="green">3</p>

</body>

最常见的问题就是margin折叠。div1和div2之间的间距是20px,而不是预想的40px。该问题创建BFC就可以解决，因为BFC不会影响其他元素的布局。

BFC是什么？

BFC：Box Formatting Context,直译为块级格式化上下文。在CSS2.1规范中定义的一个关于css渲染定位的概念。BFC是一个独立的渲染区域，规定该区域内部的box 如何布局，并且与这个区域的外部毫不想干。

在CSS2.1规范中，还定义了Inline formatting context（IFC）。CSS3中添加了G(grid)FC和F(flex)FC

如何创建BFC?

详情请看CSS2.1规范 https://www.w3.org/TR/CSS2/visuren.html#block-formatting

这里写个总结，满足以下条件之一的元素便会生成BFC。

  • 根元素
  • 浮动元素: float的值不为none
  • 绝对定位元素: position的值为absolute或fixed
  • 行内块元素: display: inline-block
  • 表格单元格: display的值为table-cell，table-caption
  • overflow的值不为visible的元素
  • 弹性盒子 display:flex或inline-flex

BFC的规则是什么？

  1. 内部的box会在垂直方向上一个接一个放置。
  2. 垂直方向的距离有margin决定，属于同一个BFC的两个相邻box的margin会发生重叠，与方向无关。
  3. 每个元素的margin box的左边与包含块border box的左边相接触。存在浮动也是如此。
  4. BFC的区域不会与float的元素区域重叠。
  5. 计算BFC的高度时，浮动子元素也参与计算。
  6. BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面元素，反之亦然

回归问题

文章开头的问题？

三个div同属于一个BFC(此处是body)中,所以根据规则第二点，margin会发生重叠。

解决方案:

p标签外在添加一个容器，并设置属性overflow:hidden。这样就产生了3个BFC,3个p在3个不同的BFC中，就不会产生margin重叠的问题。

<style>

  .red {

    background: red;

  }

  .blue {

    background: #1890ff;

  }

  .green {

    background: green;

    display: flex;

  }

  p {

    margin: 20px;

  }

  .wrap {

    overflow: hidden;

  }

</style>

<body>

  <div class="wrap">

    <p class="red">1</p>

  </div>

  <div class="wrap">

    <p class="blue">1</p>

  </div>

  <div class="wrap">

    <p class="green">1</p>

  </div>

</body>

除了margin重叠还有其他的作用吗？

  1. 清除浮动
<style>

  .par {

    border: 5px solid #fcc;

    width: 300px;

    /* display: inline-block; */

  }

  .child {

    border: 5px solid #189ff0;

    width:100px;

    height: 100px;

    float: left;

  }

</style>

<body>

  <div class="par">

      <div class="child">1</div>

      <div class="child">2</div>

  </div>

</body>

参考规则第五点，计算BFC的高度时，浮动子元素也参与计算。形成BFC后，par就会把浮动子元素的高度也计算进去。

  1. 不和浮动元素重叠
<style>

  body {

      width: 100%;

      position: relative;

  }

  .aside {

      width: 100px;

      height: 150px;

      float: left;

      background: #f66;

  }

  .main {

      height: 200px;

      background: #fcc;

      /* overflow: hidden; */

  }

</style>

<body>

  <div class="aside"></div>

  <div class="main">

  </div>

</body>

形成自适应两列布局。应用了BFC规则第四点。

从0开始学习BFC的更多相关文章

  1. IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习保护API

    IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习之保护API. 使用IdentityServer4 来实现使用客户端凭据保护ASP.N ...

  2. 20145208 《Java程序设计》第0周学习总结

    20145208 <Java程序设计>第0周学习总结 阅读心得 读了老师推荐的几个文章,虽然第四个文章"为什么一定要自学"报告资源不存在而无法阅读,其他的三篇文章都言之 ...

  3. Json.Net6.0入门学习试水篇

    原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...

  4. Bootstrap3.0入门学习系列

    Bootstrap3.0入门学习系列规划[持续更新]   前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...

  5. 自己从0开始学习Unity的笔记 I （C#字符串转换为数字）

    我基本上从0开始学习编程,运算符基本上跳过,因为知道了 “=”这个符号相当于赋值,然后“==”才是等于,其他和普通运算符号差不都,也就跳过了. 最基础的赋值那种,我看了下代码,似乎没什么难度,估计新手 ...

  6. 从0开始学习 GITHUB 系列之「向GITHUB 提交代码」【转】

    本文转载自:http://stormzhang.com/github/2016/06/04/learn-github-from-zero4/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...

  7. 从0开始学习 GITHUB 系列之「GIT 速成」【转】

    本文转载自:http://stormzhang.com/github/2016/05/30/learn-github-from-zero3/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...

  8. 从0开始学习 GITHUB 系列之「加入 GITHUB」【转】

    本文转载自:http://stormzhang.com/github/2016/05/26/learn-github-from-zero2/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...

  9. 20145328 《Java程序设计》第0周学习总结

    20145328 <Java程序设计>第0周学习总结 阅读心得 从总体上来说,这几篇文章都是围绕着软件工程专业的一些现象来进行描述的,但深入了解之后就可以发现,无论是软件工程专业还是我们现 ...

随机推荐

  1. CSS固定布局：960GS

    960栅格系统 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. 可以用作javascript异步模式的函数写法

    1. 回调函数 f1(); f2(); function f1(callback) { setTimeout(function() { // f1的任务代码 callback(); }, 1000); ...

  3. 实现动画之CSS与JavaScript对比

    曾经某个时期,大多数开发者使用 jQuery 给浏览器中的元素添加动画.让这个淡化,让那个扩大,很简单.随着互动的项目越来越复杂,移动设备的大量增加,表现性能变得越来越重要.Flash 被抛弃,有天赋 ...

  4. IDEA 基本配置

    idea使用基本配置 1配置JDK开发环境 File->project structure: 2取消自动更新 file->setting:Appearance &Behavior下 ...

  5. 总结这几天js的学习内容

    对js中难点的理解 1.把变量对象像遍历数组一样简单 对于数组 ,迭代出来的是数组元素,对于对象 ,迭代出来的是对象的属性: var obj = { w: "wen", j: &q ...

  6. 洛谷——P2342 叠积木

    P2342 叠积木   题目大意:   给你一堆积木,排成一行,初始时每对积木都只有一个,支持两种操作  第一种是移动操作,格式为“移动X到Y的上面”.X和Y代表两块积木的编号,意思是将X所的那堆积 ...

  7. 洛谷——P2169 正则表达式

    P2169 正则表达式 题目背景 小Z童鞋一日意外的看到小X写了一个正则表达式的高级程序,这个正则表达式程序仅仅由字符“0”,“1”,“.”和“*”构成,但是他能够匹配出所有在OJ上都AC的程序的核心 ...

  8. CentOS与FreeBSD环境下安装filebeat

    业务服务器CentOS与FreeBSD共存(痛苦囧...) CentOS rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch ...

  9. Pyspider爬虫简单框架——链家网

    pyspider 目录 pyspider简单介绍 pyspider的使用 实战 pyspider简单介绍 一个国人编写的强大的网络爬虫系统并带有强大的WebUI.采用Python语言编写,分布式架构, ...

  10. 【codeforces 510B】Fox And Two Dots

    [题目链接]:http://codeforces.com/contest/510/problem/B [题意] 让你在一个二维的方格里面找环; 两个点有相邻的边它们才是相连的; 有环YES,没环NO ...