本文主要是针对BFC特性的应用，至于什么是BFC，可以参看MDN的简介：
 
　　 
使用Block Formatting Context可以解决如下问题：
 
　　（1）父元素的垂直外边距不会和子元素的垂直外边距重叠
　　（2）开启该特性的元素不会被浮动元素所覆盖
　　（3）开启该特性的父元素可以包含浮动的子元素
 
BFC的这个特性默认是不具有的，所以我们需要手动的去开启这个特性，开启的方法如下所示：
 
　　（1）设置浮动（脱离了文档流）
　　（2）设置绝对定位（脱离了文档流）
　　（3）设置display为inline-block（如果是块级元素，这样设置会具有行内元素的特性）
　　（4）设置overflow设置为除visible之外的值（副作用最小的方式）
（1）使用BFC特性解决块级父元素无法包含浮动子元素的问题
利用上面的BFC的第三点特性就可以解决该问题。
首先，我们先进行一下问题场景重现。如下所示的两个div：
  1.  <div class="box1">
  2.      <div class="inBox1">
  3.  
  4.      </div>
  5.  </div>
box1中包含inBox1，当我们不显示的给box1设置一个高度时，box1的高度取决于inBox1的高度，也就是子元素会把父元素“撑开”。效果如下所示：

如图所示，红色边框的是box1，蓝色边框的是inBox1。CSS如下：
  1.  <style type="text/css">
  2.      /*
  3.          设定box1的样式
  4.      */
  5.      .box1{
  6.         border: 5px solid red;
  7.      }
  8.      /*
  9.          设定box1内部的inBox1的样式
  10.      */
  11.      .box1 .inBox1{
  12.          width: 100px;
  13.          height: 100px;
  14.          border: 1px solid blue;
  15.       }
  16.  </style>
接下来，如果我们手动的为inBox1设置一个浮动属性（float:left;），就会成为如下所示的效果：

这时，我们就可以形象的称父div——box1出现了“高度塌陷”问题。
造成这个问题的原因就是给inBox1设置了浮动属性后，子div和父div不在同一层了，所以子元素就无法承担起“撑开”父元素的任务了。
解决方法就是将box1的overflow属性设置为hidden。这样设置的好处就是副作用很小。添加后如下所示：

（2）使用BFC特性解决父元素的垂直外边距和子元素的垂直外边距重叠
场景还原如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>BFC</title>
  5.     <style type="text/css">
  6.         /*
  7.             设定box1的样式
  8.          */
  9.         .box1{
  10.             background-color: red;
  11.         /* 为了演示重叠，我们给父元素也设置一个上外边距 */
  12.                         margin-top: 20px;
  13.         }
  14.         /*
  15.             设定box1内部的inBox1的样式
  16.          */
  17.         .box1 .inBox1{
  18.             width: 100px;
  19.             height: 100px;
  20.             border: 1px solid yellow;
  21.                         /* 为子元素设置一个上外边距 */
  22.             margin-top: 100px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="box1">
  28.         <div class="inBox1">
  29.  
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>
在运行结果中我们可以看到子元素的上外边距与父元素的上外边距发生了重叠，并且取了一个最大值，也就是子元素的上外边距。

也许我们想要的效果并不是这样的，我们需要子元素以父元素的上边界外参考设置margin-top，解决方法同样是为父元素设置overflow:hidden;属性，效果如下所示：

（3）使用BFC特性解决浮动覆盖问题
如果有两个div如下所示：

如果我们给红色div块加上一个左浮动属性，则红色块会脱离文档流并位于文档流上层，所以红色块会盖住蓝色块。效果如下所示：

为了不让蓝色块被盖住，我们可以给蓝色块设置一个overflow:hidden;开启BFC特效，效果如下所示：

代码如下所示：
  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>BFC</title>
  5.      <style type="text/css">
  6.          /*
  7.              为box1设置样式
  8.           */
  9.          .box1{
  10.              width: 100px;
  11.              height: 100px;
  12.              background-color: red;
  13.              /* 为红色块设置一个浮动属性，使其脱离文档流 */
  14.              float: left;
  15.          }
  16.          /*
  17.              为box2设置样式
  18.           */
  19.          .box2{
  20.              width: 100px;
  21.              height: 100px;
  22.              background-color: blue;
  23.              /* 为蓝色块开启BFC特性 */
  24.              overflow: hidden;
  25.          }
  26.      </style>
  27.  </head>
  28.  <body>
  29.      <div class="box1">
  30.  
  31.      </div>
  32.      <div class="box2">
  33.  
  34.      </div>
  35.  </body>
  36.  </html>

浅入“Block Formatting Context”的更多相关文章

  1. Block formatting context(块级格式化上下文)

    今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context  ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...

  2. 块级格式化上下文(block formatting context)

    在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...

  3. 【转】关于Block Formatting Context－－BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  4. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  5. 关于Block Formatting Context－－BFC和IE的hasLayout

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...

  6. css Block formatting context BFC

    w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...

  7. Block formatting context

    不会JS中的OOP,你也太菜了吧!(第一篇)   一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...

  8. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  9. 什么是BFC（Block Formatting Context）

    原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...

随机推荐

  1. 爬虫---request+++urllib

    网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...

  2. [转]Excel 取汉字拼音首位

    转自:http://jingyan.baidu.com/article/63acb44adca44461fcc17e85.html 转自:http://jingyan.baidu.com/articl ...

  3. 从php脚本到浏览器,编码方式浅析

    今天简单看了一下php,服务器,浏览器如何设定编码 1.php 在php配置文件php.ini中,可以设置字符编码 ; PHP's default character set is set to em ...

  4. 第九章 springboot + mybatis + 多数据源 （AOP实现）

    在第八章 springboot + mybatis + 多数据源代码的基础上,做两点修改 1.ShopDao package com.xxx.firstboot.dao; import org.spr ...

  5. Spring 4 官方文档学习（十二）View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  6. firemonkey中stringgrid属性大全

    StringGrid之属性大全: Align:                            //确定组件在父类组件区内的对齐方式(alScale:随窗口 放大缩小) AlterRowBack ...

  7. TCP/UDP socket

    TCP socket:有链接,绑定端口,接着去侦听,若有请求,那么accept(),获得新的socket,并且去接收/发送数据报. UDP socket:无连接,不需要侦听,也不用一个新的socket ...

  8. 【洛谷P1378】油滴扩展

    搜索-- PS一个坑点:r<=0时并不是舍弃这种情况,而是让r=0 (因为每个点都要放一滴油)(读题啊!) #include<cstdio> #include<cstring& ...

  9. 纯css径向渐变(CSS3--Gradient)

    渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gra ...

  10. 第二章-如何使用github建立一个HelloWorld项目，git的add/commit/push/pull/fetch/clone等基本命令用法。--答题人：杨宇杰

    1.配置Git 首先在本地创建ssh 秘钥:在git bash输入: $ ssh-keygen -t rsa -C "your_email@youremail.com" eg:$ ...