什么是BFC（Block formatting contexts）

  • BFC的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

  • BFC的运用

　　在w3c的规范中，除了上面的一段定义之外，BFC的相关知识点分布地比较零散，但基本集中在float、绝对定位、margin collaspe中。下面我们来看看如何应用到BFC来解决问题。

  • 　　应用一：在很多网站中，我们经常会看到这样的一种，左边图片+右边信息的两栏结构，下面我们来看看如何利用BFC来实现。　　

　　首先我们给出这样的结构：

　　

 //CSS

 *{margin: 0;padding: 0;}

 .box {width:210px;border: 1px solid #000;float: left;}

 .img {width: 100px;height: 100px;background: #696;float: left;}

 .info {background: #ccc;color: #fff;}

 //HTML

 <div class="box">

     <div class="img">image</div>

     <p class="info">信息信息信息信息信息信息信息息信息信息信息信息信息信息信息信</p>

 </div>

  • 但随着文字信息增多后，会变地非常的糟糕:

很明显，这是因为info类里面的文字受到了浮动元素的影响，但这并不是我们所期望的。此时我们可以为P元素的内容建立一个BFC，让其内容消除对外界浮动元素的影响。根据上文所知，只要给info元素添加overflow:hidden;即可为其内容建立新的BFC。当然你也可以通过其他方法来建立。其效果如下：

.info {background: #ccc;color: #fff;overflow: hidden;}

  • 　

    　　　应用二：清楚内部浮动

　　　　　　　　我们来看下面的代码

　　

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .box{

                 width:600px;

                 height: auto;

                 border:2px solid #f00;

                 margin:30px auto;    

             }

             .content1{

                 height:200px;

                 width: 200px;

                 background:#f0f;

                 float:left;

             }

             .content2{

                 height:200px;

                 width: 350px;

                 background:#0ff;

                 float: right;

             }

         </style>

     </head>

     <body>

         <div class="box">

             <div class="content1"></div>

             <div class="content2"></div>

         </div>

     </body>

 </html>

　　　　

　　会发现box高度塌陷， 当第一级子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

解决方法：

hack1:在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both; height:0; overflow:hidden;} 弊端：会添加空标记，增加结构负担，代码冗余。

hack2:万能清除浮动法 （用单冒号，兼容性） 选择符:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}（后面三个做兼容处理的）

hack3：给父元素添加声明overflow:hidden;(触发一个BFC):弊端:当子元素内容超出父元素以外溢出会隐藏不好。

我这里使用给父元素添加overflow:hidden;

 .box{

     width:600px;

     height: auto;

     border:2px solid #f00;

     margin:30px auto;

         overflow:hidden;

      }

　　效果如下：

BFC的理解与应用的更多相关文章

  1. CSS-02 BFC的理解

    两个概念 感觉BFC挺重要的,于是最近查阅网上资料后小结一下,如果有不对的地方还望指正. 先理解两个概念: BOX :盒子模型 Block-Leave Box :块级元素 display属性为bloc ...

  2. BFC深入理解

    BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响 ...

  3. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  4. 我对BFC的理解

    最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...

  5. 关于由CSS2.1所提出的的BFC的理解与样例

    今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满 ...

  6. 对BFC的理解

    转载http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 在解释 BFC 是什么之前,需要先介绍 Box.Formatt ...

  7. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  8. 浅谈BFC的理解

    在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...

  9. 对 BFC 的理解

    对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC, ...

随机推荐

  1. Linux常用命令 - wget命令详解（重点）

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 下载i ...

  2. Leetcode_面试题 17.24. 最大子矩阵

    最大子矩阵问题,n是200,枚举上下行,O(N)求一下最大子段和. code class Solution { public: vector<int> getMaxMatrix(vecto ...

  3. 记一次RSA解密过程

    有问题可以评论 openssl rsa -pubin -text -modulus -in warmup -in pub.key

  4. JS事件流模型

    JS事件流模型 事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式. 事件冒泡E ...

  5. [Docker7]Harbor

    harbor download harbor offline tar package wget https://github.com/vmware/harbor/releases/download/v ...

  6. [概率] HDU 2019 Multi-University Training Contest 10 - Valentine's Day

    Valentine's Day Time Limit: 2000/2000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others ...

  7. bluekeep漏洞（CVE-2019-0708）利用

    前言 上个月爆出exp的一个高危漏洞,跟风复现一下下...(￣▽￣)~* 简介 Windows再次被曝出一个破坏力巨大的高危远程漏洞CVE-2019-0708.攻击者一旦成功利用该漏洞,便可以在目标系 ...

  8. python中的抽象类

    今天给大家介绍一下python中一个强大的功能:抽象类 因为最近发现很多同事不理解抽象类,正好抽空写篇博客,给大家介绍一下抽象类 抽象类的作用就是控制子类的方法的名称,要求子类必须按照父类的要求的实现 ...

  9. word加上尾注之后参考文献下面的横线去除

    Word 尾注上面的横线叫“××分隔符”,去掉的步骤是: 1. 先“视图”——“普通视图”: 2. 进入“引用”——“脚注”——“显示备注”: 3. 窗口下面出现了“尾注”,点击下拉菜单“所有尾注”那 ...

  10. MySQL5.6 选项和变量整理

    MySQL5.6 选项和变量整理  --allow-suspicious-udfs 这个选项控制是否用户定义函数只有一个xxx符号用于主函数加载.默认,该选项是关闭并且只具有至少一个辅助符号的UDFs ...