什么是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. Leetcode_1048. 最长字符串链

    字符串的最长严格递增子序列,前后只能相差一个字符. 直接O(N^2)暴力建图,然后记忆化跑个最长路. 直接按字符串长度排序,然后求LIS. code1 class Solution { public: ...

  2. 跟面试官侃半小时MySQL事务隔离性，从基本概念深入到实现

    提到MySQL的事务,我相信对MySQL有了解的同学都能聊上几句,无论是面试求职,还是日常开发,MySQL的事务都跟我们息息相关. 而事务的ACID(即原子性Atomicity.一致性Consiste ...

  3. （2）Windows PowerShell使用

    什么是PowerShell: Windows PowerShell 是一种命令行外壳程序和脚本环境,使命令行用户和脚本编写者可以利用 .NET Framework 的强大功能.PowerShell是命 ...

  4. 使用 Vue.js 改写 React 的官方教程井字棋

    React 的官方教程井字棋很好的引导初学者一步步走进 React 的世界,我想类似的教程对 Vue.js 的初学者应该也会有启发,于是使用 Vue.js 进行了改写 可以先查看最终的结果,尝试点击体 ...

  5. HDU 1754 I hate it 树状数组维护区间最大值

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  6. 使用Python+OpenCV进行图像处理（二）| 视觉入门

    [前言]图像预处理对于整个图像处理任务来讲特别重要.如果我们没有进行恰当的预处理,无论我们有多么好的数据也很难得到理想的结果. 本篇是视觉入门系列教程的第二篇.整个视觉入门系列内容如下: 理解颜色模型 ...

  7. [vijos1844]遭遇战<SPFA>

    题目链接:https://vijos.org/p/1404 我在二分查找区找到这道题的,没错这就是一道摆在二分区但是可以用SPFA做的一道题(当然我后来去看了下分区,貌似这题的方法很多) 这一题还是比 ...

  8. Java线程及其实现方式

    一.线程&多线程 线程: 线程是进程的一个实体,是 CPU 调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程 自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序 ...

  9. 7.Metasploit后渗透

    Metasploit 高阶之后渗透 01信息收集 应用场景: 后渗透的第一步,更多地了解靶机信息,为后续攻击做准备. 02进程迁移 应用场景: 如果反弹的meterpreter会话是对方打开了一个你预 ...

  10. Educational Codeforces Round 83 (Rated for Div. 2)

    A. Two Regular Polygons 题意:给你一个 正n边形,问你能否以这个 n 的其中一些顶点组成一个 m边形, 思路 :如果 n % m == 0 ,就可 收获:边均分 B. Bogo ...