文档章节

CSS定位规则之BFC

 恐空控
发布于 2013/08/18 23:41
字数 1173
阅读 335
收藏 7

技术改变世界!学习改变人生!

1. BFC(block formatting context,中文常译为块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

 在进行盒子元素布局的时候,BFC提供了一个环境在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。

 也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。

 在CSS3 中,BFC 叫做Flow Root。

2.形成BFC的条件(符合以下任一条件即可): 

1) float的值不为none;

2)overflow的值不为visible;

3)display的值为 table-cell、table-caption和inline-block之一;

4)position的值不为 static或relative中的任何一个;

3.BFC常见作用1)包含浮动元素BFC会根据子元素的情况自适应高度,这个特性是对父元素使overflow:hidden/auto/scroll、float:left/right样式可以闭合浮动的原理。此外网上有资料说使用display:table可以隐式触发table-cell/table-caption,来创建BFC。

<div style="border:1px solid #00F;overflow:hidden;width:300px;"> 

<div style="float:left;background:#939;">我的父元素是BFC</div> 

</div> 

<div style="line-height:3em;">----------我是华丽分割线-----------</div> 

<div style="border:1px solid gray;width:300px;">  

<div style="float:left;background:#3C6;">我的父元素不是BFC</div> 

</div> 

 

 上面的例子中,有两个div ,它们各包含一个设置了浮动的div元素,但第二个 div 出现了“高度塌陷”,这是因为内部的浮动元素脱离了普通流,因此该 div 相当于一个空标签,没有高度和宽度,即高度为 0 ,上下边框也重叠在一起。而第二个div 使用 overflow: hidden 创建了 BFC ,可以包含浮动元素,因此能正确表现出高度,其边框位置也正常了。

PS:此方法只能在支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动;在不支持BFC的浏览器(IE6-7),需要通过触发hasLayout 闭合浮动。

2)不被浮动元素覆盖浮动元素会无视兄弟元素的存在,覆盖在兄弟元素的上面,为该兄弟元素创建BFC后可以阻止这种情况的出现,如下示例:

 


<div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮动元素 </div> 

<div style="width:200px;height:80px;background:#30F;color:#fff;"> 我是非浮动元素,并且没有创建

BFC </div> 

<div style="line-height:3em;">----------我是华丽分割线-----------</div> 

<div style="float:left;width:150px;height:50px;background:#FF0;"> 

 我是浮动元素</div> 

<div style="width:200px;height:80px;background:#30F;color:#fff;display:inline-block;"> 

我是非浮动元素,创建了BFC </div> 

 

效果图所示,蓝色背景的元素通过display:inline-block创建了BFC,则浮动的兄弟元素就不覆盖在该元素上面了。

 以上的情况仅是元素宽度之和没有超出父元素宽度的情况,假设浮动元素宽度和它的非浮动兄弟元素宽度都超过了父元素的宽度,非浮动元素会下降到下一行,即处于浮动元素下方,如下所示:

 <div style="width:300px;"> 


<div style="float:left;width:150px;height:50px;background:#FF0;">  我是浮动元素</div> 

  <div style="width:200px;height:80px;background:#30F;color:#fff;overflow:hidden;"> 

  我是非浮动元素,创建了BFC </div> </div> 

 

3)阻止父子元素的margin 折叠在《认识margin折叠》一文中讲过外边距折叠的规则:仅当两个块级元素毗邻并且在同一个块级格式化上下文时,它们垂直方向之间的外边距才会叠加。也就是说,即便两个块级元素相邻,但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。示例如下。

<div style="margin-top:20px;background:yellow;width:300px;"> 

<div style="margin-top:20px;"> 我的上外边距是20px,父级元素不是BFC </div> 

</div> 

<div style="margin-top:20px;background:yellow;overflow:auto;width:300px;"> 


   <div style="margin-top:20px;"> 我的上外边距是20px,父级元素是BFC  </div> 

</div> 

 

如上图的例子,上述div元素都有顶部外边距,但第二个div 的边距没有与它的子元素的外边距折叠。这是因为第二个div 创建了新的BFC。

© 著作权归作者所有

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 下文...

mooonx
2017/11/29
0
0
CSS——让“盒子”动起来:② “定位”和 BFC

前言: 这一篇我们主要探讨“定位”和 BFC 是怎样让“盒子”动起来的。 学习方法依然是:打开 JS Bin ,拷贝代码运行查看效果,然后搞定每一行代码的前世今生。 1 什么是“定位” “定位”就...

itsOli
05/01
0
0
详解 清除浮动 的多种方式(clearfix)

说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位...

FEWY
2017/04/03
0
0
【前端帮帮忙】第8期 关于BFC,你需要了解的

BFC是耳熟能详的一个东西了,经常听到,其实在项目中也经常用到,比如最常用的清除浮动,自适应两栏布局等等。只是都没有去深究其原理和相关的知识点,今天就一起来好好学习一下吧。 要明白是...

大志_前端
06/02
0
0
BFC(block format context) 块级上下文格式化

对于这个名词真是熟悉得不能在熟悉了,可是自己理解得还是有写浅薄 写在前面 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元...

南蓝NL
02/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
49分钟前
3
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
2
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部