块级格式化上下文(BFC)

一、什么是BFC

具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。

总之，BFC就是一种属性，这种属性会影响着元素的定位及与其兄弟元素之间的相互作用。

二、BFC的用途

从整体上看，BFC是隔离了的容器：

1、BFC会阻止外边距折叠

折叠：两个相邻的盒子（可能是兄弟关系也可能是祖先关系）的垂直外边距可以合并成一个单独的垂直外边距。这种合并外边距的方式被称为折叠。

在同一个BFC中，两个相邻的块级元素在垂直方向上的外边距会发生叠加，具体的叠加规则如下：

当两个块级元素的外边距都为正数时，取较大者
当两个块级元素的外边距都为负数时，取较大者
当一正一负时，为两者的和
根据上面的定义可知，发生折叠的条件是：两个块级元素位于同一个BFC中，因而要阻止外边距折叠只需要产生新的BFC。

创建了BFC的元素，不和它的子元素发生外边距折叠。因而如果同一级中的块级元素发生折叠情况(兄弟关系)，不能在元素本身上产生BFC属性，而应该给任意一个元素新建一个BFC容器(新增父级元素并设置为新的BFC，例如设置overflow:hidden;)。如果是祖先关系，则只需要触发父级BFC。

A、兄弟关系外边距折叠

<!--兄弟关系折叠-->

<head>

  <style>

    div:nth-child(1){

      margin:20px;

    }

    div:nth-child(2){

      margin:40px;

    }

    div:nth-child(3){

      margin:20px;

    }

  </style>

</head>

<body>

  <div style="width:100px;height:100px;background:#123;"></div>

  <div style="width:100px;height:100px;background:#496;"></div>

  <div style="width:100px;height:100px;background:#789;"></div>

</body>

/*兄弟关系阻止折叠方法*/

<head>

  <style>

    .newBFC{

      margin:40px;

      overflow: hidden;

    }

  </style>

</head>

<body>

  <div style="width:100px;height:100px;background:#123;margin:20px;"></div>

  <!-- newBFC类表示的仍然和上下两个div在同一个BFC容器中，因而仍旧会发生外边距折叠。不过其子元素已经位于另外一个BFC容器中，其与父元素的边距不会折叠 -->

  <div class="newBFC">

    <div style="width:100px;height:100px;background:#496;margin:20px;"></div>

  </div>

  <div style="width:100px;height:100px;background:#789;margin:20px;"></div>

</body>

B、祖先关系折叠

<!--外层div与内层div的垂直外边距margin合并了-->

<div style="margin:30px">

  <div style="width:100px;height:100px;background:red;margin:30px"></div>

</div>

<!--将触发父级BFC属性，就不会合并垂直外边距了-->

<div style="margin:30px；overflow:hidden;">

  <div style="width:100px;height:100px;background:red;margin:30px"></div>

</div>

2、BFC可以包含浮动元素

<div style="border:2px solid red;">

  <div class="child" style="width:100px;height:100px;background:#565;"></div>

</div>

未给child加float属性前：

给child加float属性后：

从上面两个对比图可以发现，加了float属性后，包含child类的div脱离普通/标准文档流，外层div高度塌陷。

触发BFC

<div style="border:2px solid red;overflow: hidden;">

    <div style="width:100px;height:100px;background:#565;float: right;"></div>

</div>

使用overflow: hidden;触发BFC属性，就可以承载具有float属性的元素了。

3、BFC可以阻止元素被浮动元素覆盖

浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发BFC后可以阻止这种情况的发生。经常在布局中使用。

<div style="width:100px;height:300px;background-color: #860;float: left;"></div>

<div style="width:400px;background-color: #395;">

  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>

  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>

  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>

</div>

触发BFC

<div style="width:100px;height:300px;background-color: #860;float: left;"></div>

<div style="width:400px;background-color: #395;overflow: hidden;">

  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>

  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>

  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>

</div>

三、如何触发BFC

浮动元素：float除none以外的值
绝对定位元素：position(absolute、fixed)
display为以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption
overflow除了visible以外的值(hidden、auto、scroll)

块级格式化上下文(BFC)的更多相关文章

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
BFC(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
BFC块级格式化上下文简述
做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...
详解块级格式化上下文（BFC）
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
BFC块级格式化上下文
BFC块级格式化上下文触发条件 overflow 值不为 visible 的块元素根元素 html 元素浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
基础总结（02）--BFC（块级格式化上下文）
BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...
BFC——块级格式化上下文
BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...
我理解的BFC(块级格式化上下文)
BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...

随机推荐

Codeforces Round #773 (Div. 2)D，E
D. Repetitions Decoding 传送门题目大意: 一个长为 n ( n 2 ≤ 250000 ) n(n^2\leq250000) n(n2≤250000)的序列,每个元素 a i ...
jprofiler 查看程序内存泄露
在最近的工作中,通过JProfiler解决了一个内存泄漏的问题,现将检测的步骤和一些分析记录下来,已备今后遇到相似问题时可以作为参考. 运行环境: Tomcat6,jdk6,JProfiler8 内存 ...
Qt：QTimer
1.说明 QTimer类代表计时器,为了正确使用计时器,可以构造一个QTimer,将它的timeout()信号connect到合适的槽,之后调用start().然后,这个QTimer就会每隔inter ...
prometheus-数据展示之grafana部署和数据源配置
1.监控pods . prometheus再部署以后,会自带cAdvisor.结果如下: 2.K8S集群状态监控.需要使用kube-state-metrics插件.部署以后 kubernetes. ...
学习c语言时对一些疑问的测试
#include<stdio.h>#include<string.h> int main(){/* 1 */// int a[3][3]={6,1,2,3,4,5};// in ...
二级py--day6数据库设计基础
二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...
think php 路由增删改查（搜索+关键字标红+缩略图）
路由 use think\Route; //展示添加表单 Route::get('create','user/user/create'); //表单提交数据 Route::post('save','u ...
Java安装与卸载
Java安装与卸载 Java优势面向对象可移植性,跨平台易用高性能为分布式设计具有动态性支持多线程安全性健壮性,运行前会对内存进行检查 Java三大版本 JavaSE:标准版 Java ...
java笔记：00 数据类型
网易互娱23届实习笔试_3x3锯齿数独
一.输入: 输入一个3x3数独,字符'.'代表空输入三个宫的域,每个宫包括三个位置,[0,0]表示0行0列二.输出要求: 1.每个宫里最终123各出现一次, 2.数独中的行列里不出现重复字符: 输出 ...

块级格式化上下文(BFC)

块级格式化上下文(BFC)的更多相关文章

随机推荐

热门专题