块级格式上下文(Block formatting context)

什么是BFC?

块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。 – MDN 块格式上下文

BFC是一个容器,在这个容器中的元素不会影响到其他容器的布局,处于不同 BFC 中的元素不会互相干扰。

BFC的触发条件

  • 根元素
  • 浮动元素
  • 绝对定位元素 absolute 或 fixed
  • display为 inline-block 或 table-cell 或 table-caption 或 flex 等。非 block 、inline
  • overflow 的值不为 visible 的元素

其中,最常见的就是 overflow: hiddenfloat: left/rightposition: absolute

BFC的特性

  • 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流);
  • 处于同一个BFC中的元素相互影响,可能会发生margin collapse;
  • 每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;
  • 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;
  • 浮动盒区域不叠加到BFC上;

BFC的作用

阻止兄弟元素间 margin 折叠,复现代码如下:

<p>first</p>
<p>second</p> <style>
p {
color: red;
background: #eee;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
border: solid 1px red;
}
</style>

只要对 p 加个 overflow: hidden 就能解决

防止浮动元素导致父元素高度坍塌,复现代码如下。

<div class="box">
<div class="float">float</div>
<div class="float">float</div>
</div> <style>
.float{
float: left;
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
}
.box{
border: 1px solid red;
width: 300px;
margin: 100px;
padding: 20px;
}
.BFC{
overflow: hidden;
*zoom: 1;
}
</style>

从运行结果可以看出,如果块级元素里面包含着浮动元素会发生高度塌陷。

解决方法就是将它变成一个 BFC,BFC 在计算高度时会自动将浮动元素计算在内。

清除浮动

//利用伪元素清除浮动
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}

注意这部分代码的 *zoom: 1 是 IE hack。

BFC块级格式上下文介绍的更多相关文章

  1. BFC块级格式上下文

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  2. BFC——块级格式上下文

    BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身 ...

  3. BFC块级格式

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  4. 什么是BFC(块级格式上下文)?

    ㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...

  5. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  6. CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  7. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  8. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  9. CSS--理解块级格式上下文(BFC)

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...

随机推荐

  1. 吴裕雄--天生自然python学习笔记:python用OpenCV 读取和显示图形

    Open CV 是一个开源.跨平台的计算机视觉库,它可 以在商业和研究领域中免费使用,目前已广泛应用于人机 互动.人脸识别.动作识别.运动跟踪等领域. 要识别特定的图像,最重要的是要有识别对象的特征 ...

  2. TPO1-1 Groundwater

    If the pores are large,the water in them will exist as drops too heavy for surface tension to hold,a ...

  3. CF-1144F-Graph Without Long Directed Paths

    题意: 给出一个无向联通图,要求你给出每条边的方向,使得无论从哪个点出发最多只能走一条边: 思路: 对于每个点,要么出度为0,要么入度为0即可.所以这就是一个判断二分图. 二分图 #include & ...

  4. 瑞星发布Linux系统安全报告:Linux病毒或将大面积爆发

    近半年来,由于中央推荐使用国产Linux操作系统,国产Linux操作系统开始受到政府机关及大型企事业机关单位的高度重视.很多人都认为,以Linux系统为基础的国产操作系统最符合国家.政府和企业信息安全 ...

  5. upper_bound()函数使用方法

    upper_bound( begin,end,num):从数组的begin位置到end-1位置二分查找第一个大于num的数字,找到返回该数字的地址,不存在则返回end.通过返回的地址减去起始地址beg ...

  6. mybatis参数映射

    转载地址:http://iyiguo.net/blog/2012/09/27/mybatis-param-mapping-rules/ 规则 非注解参数 当参数未使用@Param注解时,可以通过以下方 ...

  7. 一句话看懂redux

    一个是存储在 store 里面的 state,另一个是每一次调用 dispatch 所传进来的 action.reducer 的作用,就是对 dispatch 传进来的 action 进行处理,并将结 ...

  8. 码海拾遗:简述C++(一)

    C++是Bjarne Stroustrup博士于1982年,在C语言的基础上引入并扩充了面向对象的概念后发明的一种新的程序语言.就与C语言的渊源而言,C++可以说是C语言的超集,它兼容C的一切(可能是 ...

  9. jquery关于checkbox复选框是否被选中的问题

    本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都 ...

  10. jQuery学习笔记三

    使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...