CSS的BFC

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

BFC的生成

 CSS2.1规定满足一下条件之一就会生成BFC:

  1. 根元素
  2. float的值不为none
  3. overflow的值不为visible
  4. position的值为fixed或absolute
  5. display的值为table-cell / table-caption / inline-block / flex / inline-flex

BFC的布局规则

 上面说了,生成BFC的区域会有一套渲染规则来约束块级盒子内的布局;这些约束规则如下:

  1. 内部的块级元素会在垂直方向,一个接一个地放置
  2. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
  3. 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并,不属于同一个BFC的两个相邻的块级元素不会发生margin合并;
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时,浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;外面的元素也不会影响到容器里面的子元素

说了一通BFC的触发条件和布局规则,初次接触的可能很不容易理解;下面用这些BFC布局规则来举例几个常见的css规则和技巧就很容易明白了~



- 第一点与第二点很好理解,就不举例子细述了。


  • 外边距合并是个很常见的问题,即 在垂直方向上的两个相邻块级元素,它们的相邻一侧的外边距会发生合并(重叠),最终它们俩的间距等于较大的那个外边距:
<head>
<style>
.bro1{
width:300px;
height:200px;
background:#ddd; margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink; margin-top:20px;
}
</style>
</head>
<body>
<div class='bro1'></div>
<div class='bro2'> </div>
</body>

 依据第三点规则:位于同一BFC内的块级元素会发生外边距合并;那么,要解决这个问题,让原先这两个相邻的两个元素不在同一BFC内就可以了。 为其中一个块创建新的BFC:

<head>
<style>
.bro1{
width:300px;
height:200px;
background:#ddd; margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink; margin-top:20px;
}
.special{
overflow:auto;
}
</style>
</head>
<body>
<div class='special'>
<div class='bro1'></div>
</div>
<div class='bro2'> </div>
</body>

效果:

  • 第四点:BFC的区域不会与float的元素区域重叠。 就算是初学浮动 应该也知道当元素浮动时会脱离文档流,向一边流动直到它的边缘碰到包含框的边缘;因为不在文档流中所以不占空间,在浮动时可以覆盖住别的元素:



     利用第四点的约束规则,可以让没有浮动但又不想被覆盖的元素触发BFC,就不会给float的元素覆盖住了。

这个规则还可以作为多栏布局的一种实现方式。

<body>
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>

左右两栏宽度固定,中间栏可以根据浏览器宽度自适应:


  • 包含浮动子元素:因为浮动元素脱离文档流,所以父元素的高度是只会由包含的非浮动元素决定。特别是如果父元素中所有的子元素都进行了浮动,那么这个父元素的高度将会为0。

     而要想让父元素包含住浮动元素,就只要让父元素触发BFC就能利用到上面的第六条规则:计算BFC的高度时,浮动子元素也参与计算。 这就是时常用的一个技巧“用overflow:hidden/auto清除包含块内子元素的浮动”的原理。

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的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  4. CSS中的BFC

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

  5. CSS中的BFC详解

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

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

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

  7. CSS 中的 BFC,IFC,GFC和FFC

    原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...

  8. CSS中z-index全解析

    一.z-index解释 z-index属性决定了一个HTML元素的层叠级别,元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的z-index值意味着这个元素在叠层顺序中会更靠近 ...

  9. CSS 中z-index全解析(摘自阿里西西)

    z-index全解析 Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶 ...

随机推荐

  1. ERwin 正向工程

    1.物理模型带字段备注 COMMENT ON 将模型切换至 physical 模式选择 Model ---> Domain Dictionary , 在 tab 标签中,切换至comment 然 ...

  2. Protecting resources in iPhone and iPad apps

    源码:https://github.com/lingzhao/EncryptedResourceDemo UPDATE: The example project has been updated to ...

  3. 08Java Server Pages 语法

    Java Server Pages 语法 基础语法 注释 <!--   -->可以在客户端通过源代码看到:<%--   --%>在客户端通过查看源代码看不到. <!--浏 ...

  4. 微服务网关从零搭建——(一)创建测试api以及api自动注入consul

    本系列编写目的纯属个人开发记录  以下代码均为demo级 如有需要 请自行优化 代码完整包由于公司电脑加密 无法上传整包的demo文件 consul 开发环境简易处理 consul 下载地址 : ht ...

  5. .net core 中简单封装Dapper.Extensions 并使用sqlsuger自动生成实体类

    引言 由公司需要使用dapper  同时支持多数据库 又需要支持实体类 又需要支持sql 还需要支持事务 所以采用了 dapper + dapperExtensions  并配套 生成实体类小工具的方 ...

  6. Address already in use: JVM_Bind:8080错误的解决办法

    解决办法:先到命令行查找8080端口号被那个占用,输入后面的命令:netstat -ano 查到 然后到任务管理器把PID为20904的进程给结束掉,就OK了 -------------------- ...

  7. 每日命令:(3)pwd

    Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...

  8. webpack3 + vue 添加 serviceWorker

    新的vue脚手架已经可以自带pwa了,本文主要针对旧版的webpack. 先装三个插件: $npm i register-service-worker sw-precache-webpack-plug ...

  9. 用php生成HTML文件的类

    目的 用PHP生成HTML文档, 支持标签嵌套缩进, 支持标签自定义属性 起因 这个东西确实也是心血来潮写的, 本来打算是输出HTML片段用的, 但后来就干脆写成了一个可以输出完整HTML的功能; 我 ...

  10. java mysql prepareStatement模糊查询like使用注意

    今天在使用mysql 的like语句是,发现prepareStatement的like语句和一般的=写法有一样. 当要使用prepareStatement的like查询时,按照一般写法,都会写成: S ...