什么是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. VS2019 C++动态链接库的创建使用(1) - 创建使用dll

    静态库:函数和数据被编译进一个二进制文件,通常扩展名为.lib,在使用静态库的情况下,在编译链接可执行文件时,链接器从库中复制这些函数和数据并把它们和应用程序的其它模块组合起来创建最终的可执行文件. ...

  2. Who Gets the Most Candies? POJ - 2886（线段树单点更新+区间查询+反素数）

    预备知识:反素数解析 思路:有了反素数的解法之后就是线段树的事了. 我们可以用线段树来维护哪些人被淘汰,哪些人没被淘汰,被淘汰的人的位置,没被淘汰的人的位置. 我们可以把所有人表示为一个[1,n]的区 ...

  3. Idea中使用http请求解决中文乱码问题

    以请求百度为例,使用如下代码即可解决: GET https://www.baidu.com User-Agent: Mozilla/.X MetaSr 1.0

  4. Django实现简单的用户添加、删除、修改等功能

    一. Django必要的知识点补充 1. templates和static文件夹及其配置 1.1 templates文件夹 所有的HTML文件默认都放在templates文件夹下. 1.2 stati ...

  5. 第七周java实验作业

    实验七 继承附加实验实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: Public  该类或非该类均可访问 Private  只有该类可以访问 Pro ...

  6. java基于Hash表和双向链表简单实现LRU Cache

    package lru; import java.util.HashMap; public class LRUCache2<K,V> { public final int capacity ...

  7. Flutter 强大的MediaQuery控件

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQu ...

  8. 微信内置浏览器对于html5的支持

    微信内置浏览器对于html5的支持 来源: 作者: 热度:102 日期:14-06-10, 09:10 AM 我在做针对微信的HTML5应用, 目前遇到的几个问题是 一. 安卓版微信直接调用系统浏览器 ...

  9. Tensorboard详解（下篇）

    间提壶华小厨 1 Tensorflow监控指标可视化 除了GRAPHS栏目外,tensorboard还有IMAGES.AUDIO.SCALARS.HISTOGRAMS.DISTRIBUTIONS.FR ...

  10. 使用webhooks进行代码的自动化部署

    AutoMaticDeployment---自动部署 项目简介 使用Github的webhooks进行代码的自动化部署 本项目是个人最近搞的一个小工具,自己最近在用hexo部署个人博客(地址:http ...