1.什么是BFC

其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西。

后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下文)的缩写,它是W3C CSS 2.1 规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

2.什么情况下会创建BFC

CSS规范说明了在下列这些情况下会创建新的block formatting context:

浮动元素(float: left | right);

绝对定位元素(position: absolute | fixed);

行内块元素(display: inline-block);

表格的单元格(display: table-cells,TD、TH);

表格的标题(display: table-captions,CAPTION);

'overflow' 特性不为visible 的元素(除非该值已经传播到viewport?);

表格元素创建的"匿名框"

注意,"display:table" 本身并不产生"block formatting contexts"。但是,它可以产生匿名框,其中包含"display:table-cell" 的框会产生块格式化上下文。总之,对于"display:table" 的元素,产生块格式化上下文的是匿名框而不是"display:table" 。

注意,是这些元素创建了块格式化上下文,它们本身不是块格式化上下。

3.BFC布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算

 4.BFC的主要作用及原理

1.自适应两栏式

代码:

页面效果如下:

这个图就像上面的布局规则第3条(每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。)所说一样,虽然存在浮动的元素mydiv1,但mydiv2的左边依然会与包含块的左边相接触,而根据布局规则第4条(BFC的区域不会与float box重叠)所说,我们可以通过通过触发mydiv2生成BFC, 来实现自适应两栏布局:

而当我们添加了(overflow:hidden)后,我们就通过触发mydiv2来生成了一个BFC,而BFC生成后页面效果如图:

注意:这个新的BFC不会与浮动的mydiv1重叠。因此会根据包含块的宽度,和mydiv1的宽度,自动变窄

2.清除浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="text/html">
<title></title>
<style type="text/css">
.mydiv1{
width: 100px;
height: 150px;
float: left;
background: #f66;
margin-left: 10px;
}
.mydiv2{
width: 100px;
height: 150px;
background: #fcc;
float: left;
margin-left: 10px;
}
.mydiv3{
width: 100px;
height: 150px;
float: left;
background-color: #ebcccc;
margin-left: 10px;
}
.wdiv{
border: 5px solid #9acd32;
width: 100%;
}
</style>
</head>
<body>
<div class="wdiv">
<div class="mydiv1"></div>
<div class="mydiv2"></div>
<div class="mydiv3"></div>
</div>
</body>
</html>

一般我们想下的是如下的情况:

可是现实效果呢?却是如下:

之所以会这样了,是因为父容器并没有把浮动的子元素包围起来,俗称塌陷

而我们要清除这种现像了,就要根据布局规则第6条(计算BFC的高度时,浮动元素也参与计算),我们可以触发wdiv来生成BFC,,那么wdiv在计算高度时,wdiv内部的浮动元素也会参与计算。代码如下:

效果也同上面第一张一样,效果如下:

总结

因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

 
 
 
 
 
 

我对CSS中的BFC的理解的更多相关文章

  1. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  2. BFC?来自CSS中的BFC

    浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...

  3. CSS中的BFC详解

    引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting ...

  4. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  5. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  6. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  7. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  8. 对css中clear元素的理解

    clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选 ...

  9. CSS中的BFC

    CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...

随机推荐

  1. DOM4j 操作XML

    <?xml version="1.0" encoding="GBK"?> <persons> <men> <perso ...

  2. HDU 1213 How Many Tables 并查集 寻找不同集合的个数

    题目大意:有n个人 m行数据,每行数据给出两个数A B,代表A-B认识,如果A-B B-C认识则A-C认识,认识的人可以做一个桌子,问最少需要多少个桌子. 题目思路:利用并查集对相互认识的人进行集合的 ...

  3. 文本属性Attributes 初步

    转载自:http://www.cnblogs.com/qingche/p/3574995.html 1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSF ...

  4. initWithNibName与viewDidLoad的执行关系以及顺序

    转载自:http://www.java123.net/v/380331.html 一个ViewController,一般通过init或initWithNibName来加载.二者没有什么不同,init最 ...

  5. Spring创建对象的方式3种方式

    此文为基础回顾,估计是最后一次总结. 项目利用maven进行架构,其基本项目结构为: 其中pom.xml中的内容为: <project xmlns="http://maven.apac ...

  6. SIFT

    简介 SIFT(scale invariant feature transform)——尺度不变特征转换,用来检测和描述局部特征,运用范围包括object recognition(目标检测), rob ...

  7. A标签中通过href和onclick传递的this对象

    在blog的后台管理中允许为一个分类添加一个地址,但是不好添加onclick事件.想传递当前对象给一个函数,于是就将这个URL写成"Javascript:shoControlSidebar( ...

  8. 为什么说Neutron不是SDN?

    http://vuejs.com.cn/ 这里面有个canvans 画图的js 代码.有意思,研究一下. Neutron 介绍:https://www.ibm.com/developerworks/c ...

  9. [iOS]C语言技术视频-10-指针变量

    下载地址: 链接: http://pan.baidu.com/s/1jGjbaXg 密码: u2t9

  10. 使用SQLServer2005插入一条数据时返回当前插入数据的ID

    使用SQLServer2005插入一条数据时返回当前插入数据的ID 在执行完插入后 再执行 select @@identity from users 就OK 就是刚才插入的那行的 ID了 补充: @@ ...