css-块级格式上下文
定义:
通俗地来说:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素(里面怎么布局都不会影响外部),BFC任然属于文档中的普通流。
满足BFC出现的情况:
- 浮动
- 绝对定位元素
- display为inline-block, table-cell, table-caption, flex, inline-flex
- 设置overflow且值不为visible
- display:flex 或者 display:inline-flex
补充:display:table-caption
表示元素的display水平表现为表格标题,自动自适应于外部表格容器宽度
这么一列举,是不是感觉日常开发经常用到,只不过不知道官方叫法而已。
链接:https://www.jianshu.com/p/af03f45da81b
使用BFC防止外边距塌陷
在同一个BFC中的两个相邻块级元素的外边距会发生塌陷,如下边这个例子:
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
div.container
是一个BFC,里面有三个块级元素,设置了相同的margin,其中第三个块级元素外面套了一层div,但是未设置任何样式。初始的CSS样式如下:
.container {
background-color: red;
overflow: hidden;
}
p {
margin: 10px 0;
background-color: lightgreen;
}
初始结果如下:

可以看到相邻两个p
元素间的间距为10px而不是20px,可见发生了外边距塌陷。如果要避免外边距塌陷,只需要使第三个p
元素的外部容器形成一个新的BFC:
.newBFC {
overflow : hidden; /* 形成新的 BFC */
}
修改后的效果为:防止边距塌陷

css-块级格式上下文的更多相关文章
- 理解 CSS 布局和块级格式上下文
前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...
- BFC块级格式上下文介绍
块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...
- BFC块级格式上下文
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
- 什么是BFC(块级格式上下文)?
㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...
- CSS--理解块级格式上下文(BFC)
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...
- css 块级格式化上下文(BFC)
一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...
- BFC(块级格式上下文)
BFC的生成 满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell ...
- BFC——块级格式上下文
BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身 ...
- 详解块级格式化上下文(BFC)
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
随机推荐
- 【Swift 4.0】iOS 11 UICollectionView 长按拖拽删除崩溃的问题
正文 功能 用 UICollectionView 实现两个 cell 之间的位置交互或者拖拽某个位置删除 问题 iOS 11 以上拖拽删除会崩溃,在 iOS 9.10 都没有问题 错误 017-10- ...
- 基于开发者中心DevOps流水线快速上云
导读:“DevOps”这个词现在很流行,它具体指的是什么呢?本文介绍了DevOps和开发者中心DevOps流水线,图文并茂,解答您的疑惑. 那么DevOps是什么?开发者中心<DevOps流水线 ...
- FJUTOJ-周赛2016-11-25
注:fjutoj基本每周都有一次周赛,欢迎大家都来参加! 网址:http://59.77.139.92/ 或 acm.fjut.edu.cn A题 题意:一年中,每个月有可能亏x 元,有可能赚y 元, ...
- CodeForces 91B Queue
题目链接:http://codeforces.com/contest/91/problem/B 题目大意: 有n头大象排队买票,第i头大象的年龄为ai,如果有比他年轻的大象排在他前面,这头大象就会非常 ...
- Shell命令-文件及目录操作之mkdir、mv
文件及目录操作 - mkdir.mv 1.mkdir:创建目录 mkdir命令的功能说明 mkdir命令用于创建目录,默认情况下,要创建的目录已存在,会提示文件存在,不会继续创建目录. mkdir命令 ...
- SpringCloud学习笔记:声明式调用Feign(4)
1. Feign简介 Feign采用声明式API接口的风格,将Java HTTP客户端绑定到它的内部. Feign的首要目标是简化Java HTTP客户端调用过程. 2.Feign客户端示例 Feig ...
- 鼠标事件-MouseEvent【转】
原文地址> 鼠标事件-MouseEvent 当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性. 可以通过如下方法在google控制台打印出 MouseEve ...
- WinForm登录验证
概述:输错三次禁止登陆,15分钟后才能继续. 图示: Form1代码: using System; using System.Configuration; using System.Data.SqlC ...
- 【LOJ6067】【2017 山东一轮集训 Day3】第三题 FFT
[LOJ6067][2017 山东一轮集训 Day3]第三题 FFT 题目大意 给你 \(n,b,c,d,e,a_0,a_1,\ldots,a_{n-1}\),定义 \[ \begin{align} ...
- 一种使用 sprintf 导致死机的情况
@2019-02-26 [小记] char temp[10] float money; sprintf(temp, "0.2f", money); 以上使用方法可能导致死机,原因是 ...