什么是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. vunlhub-DC-1-LinuxSuid提权

    将靶场搭建起来 桥接看不到IP 于是用masscan 进行C段扫描 试试80 8080 访问之后发现是个drupal 掏出msf搜索一波 使用最近年限的exp尝试 exploit/unix/webap ...

  2. 洛谷 P1891 疯狂LCM 题解

    原题链接 享受推式子的乐趣吧 数论真有趣! 庆祝:数论紫题第 \(3\) 道. \[\sum_{i=1}^n \operatorname{lcm}(i,n) \] \[= \sum_{i=1}^n \ ...

  3. js事件的获取

    获取元素样式属性 Method DES clientWidth 获取元素宽度 clientHeight 获取元素高度(内容+内边距) document.body.clientWidth 获取body宽 ...

  4. Ajax-使用教程

    运行环境 ajax一定的是运行在网站服务器里面,因此你需要自己配置nodejs服务器 导学:传统的问题还有代理人ajax 传统的http中是又浏览器来做.它在发生和响应的时候网页是不能进行其他操作的 ...

  5. pycharm 2.7 快捷键

    提示 CTRL Q: 在参数列表位置,显示可以输入的所有参数 CTRL Q: 查看选中方法的文档字符串 阅读 CTRL -: 折叠当前代码 CTRL +: 展开当前代码 CTRL SHIFT -: 折 ...

  6. spring ioc源码简析

    ClassPathXmlApplicationContext 首先我们先从平时启动spring常用的ClassPathXmlApplicationContext开始解析 ApplicationCont ...

  7. C语言中结构体内存存储方式

    C语言中结构体内存存储方式 结构体的默认存储方式采用以最大字节元素字节数对其方式进行对齐,例如一个结构体中定义有char.int类型元素,则结构体存储空间按照int类型占用字节,如果还有double类 ...

  8. 实验四 数据查询3-group by等

    实验四 数据库查询 一.  实验内容: 1. Group by语句 2. Having 语句 3. Order by语句 4. Limit语句 5. Union语句 6. Handler语句 二.  ...

  9. Aho-Corasick automaton

    目录 KMP 算法 BF 算法 KMP 算法 避免重复遍历 算法思想 代码实现 匹配函数 求 next 数组 字典树 多模匹配 构造字典树 字典树的结构体定义 构造算法 伪代码 代码实现 失配指针 功 ...

  10. B 蒜头君的树

    时间限制 : - MS   空间限制 : - KB  评测说明 : 2s,256m 问题描述 蒜头君有一棵有根树,树的每一边都有边权,蒜头君想知道任意两点间最短距离之和为多少. 另外,由于各种原因,蒜 ...