【css】浅谈BFC
定义：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC的布局规则如下：
.内部的盒子会在垂直方向，一个个地放置；
.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
.BFC的区域不会与float重叠；
.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
.计算BFC的高度时，浮动元素也参与计算。
以下行为会触发BFC
官方：
根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 ）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
资源：
1.浮动元素：float 除 none 以外的值。
2.绝对定位元素：position (absolute、fixed)。
3.display 为 inline-block、table-cells、flex。
4.overflow 除了 visible 以外的值 (hidden、auto、scroll)。
解决方案：
使用 overflow 来创建一个新的BFC，是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。
案例
demo1:自适应两栏布局
我们先定义两个div：
<div class="aside"></div>
<div class="main"></div>
然后定义css：
div {
width:300px;
}
.aside {
float: left;
width: 100px;
height: 150px;
background: black;
}
.main {
height:200px;
background-color:red;
}
效果图如下：
分析：
这正满足了规范的第三条：
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
所以如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：
BFC的区域不会与float重叠。
也就是说我们需要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC：
.main {
height:200px;
overflow:hidden;
background-color:red;
}
效果如下：
demo2:清除内部浮动
首先是父div套子div
<div class="parent">
<div class="child"></div>
</div>
然后是css:
.parent {
width:300px;
border:1px solid black;
}
.child {
float:left;
width:100px;
height:100px;
border:1px solid red;
}
效果如下：
可以看到，父div压根就没有被撑开。
我们再回顾一下BFC规范中的第六条：
计算BFC的高度时，浮动元素也参与计算。 所以我们需要将父div触发为BFC，也就是将其overflow设为hidden：
.parent {
width:300px;
overflow:hidden;
border:1px solid black;
}
效果如下：
可以看到父div已经撑开了。
demo3:margin重叠问题
先定义两个垂直的div：
<div class="p"></div>
<div class="p"></div>
然后定义margin:
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
可以看到margin重叠后的效果：
我们再看看BFC规范的第二条：
盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC，所以我们需要两个div不属于同一个BFC。 为第二个div套一个父亲div，然后讲其overflow设为hidden来激活一个BFC就可以使margin不再重叠。
html:
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
css:
.wrap {
overflow:hidden;
}
效果如下：
相关资料：
【css】浅谈BFC的更多相关文章
- 浅谈BFC
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Fo ...
- 浅谈BFC和IFC
先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- 浅谈BFC与应用
什么是BFC BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文.它是一个独立渲染的区域,规定了内部如何布局,同时不受外界的影响.我们的根元素本身就是一个 ...
- 浅谈BFC的理解
在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...
- css浅谈
一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- BFC 浅谈
写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...
- 转：浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 浅谈对CSS的认识
自从进公司也有2个多月了,相信和我一批进来的小伙伴们都收获了很多东西,这个是在学校所学不到的,也让成长了很多.作为新人的我,从认为CSS是个很简单的东西,到现在觉得CSS中水很深,感觉学了很多的CSS ...
随机推荐
- 通过generate解析SQL日志生成xml进行SQL回放
查看Oracle redo日志来分析SQL执行记录 1)设置Oracle数据字典导出路径参数(可选) shutdown immediatealter system set UTL_FILE_DIR=' ...
- Vue —— 从环境搭建到发布
之前学习 Vue 的时候也是按着别人的文档一步步下载安装构建项目再运行,为了避免忘记步骤,所以还是记在这吧. 参考链接: https://www.zybuluo.com/xudongh/note/75 ...
- linux下如何交叉编译util-linux?
1. 获取源码 wget https://mirrors.edge.kernel.org/pub/linux/utils/util-linux/v2.34/util-linux-2.34.tar.xz ...
- 20190710记录：去掉中转图，直接以1280*1024进行反坐标计算，填补pbFinal。
1.记录:去掉中转图,直接以1280*1024进行反坐标计算.pbFinal=1280*1024. // Imagejoint.cpp : 定义控制台应用程序的入口点. // #include &qu ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_16-异常处理-可预知异常处理-自定义异常类型和抛出类
在common工程创建捕获异常的类:CustomException Runtime叫做运行异常.在代码中抛出的话 对我们的代码没有可侵入性 如果在代码上抛出 如果改成Exception 这时候就会有错 ...
- 类型TTreeView.items.add 与 TTreeView.items.addchild有何区别？(10分)
我看了书上例子,好象两者都可以实现treeview中的node 的构建. addchild是给当前的node建一个子node,它比当前node要向右缩进几格add建立同级的node,不缩进 aNode ...
- RocketMQ搭建-WEB集成RMQ-SE集成RMQ
坑一 https://blog.csdn.net/c_yang13/article/details/76836753 JAVAWEB集成RMQ https://www.cnblogs.com/yun9 ...
- python GC、分支、循环
内存管理 1.变量无须事先声明,也不需要指定类型 2.python编程中一般无须关心变量的存亡,一般也不用关心内存的管理 3.python使用引用计数记录所有对象的引用计数 当对象引用数变为0,他就可 ...
- k8s学习之资料参考网址（持续更新）
此文章持续更新关于学习k8s生态的参考网址: 二进制方式搭建 (此部署方式是一步一步的部署,过程清晰) https://github.com/opsnull/follow-me ...
- The input file should be UTF8 without a byte-order-mark(BOM)
byte-order-mark = (BOM) 在unicode诸编码中,字节顺序标记-BOM被用于标记编码高低位的顺序. .BOM是一个特殊的unicode字符.早期标准定义其为“零长度.非断行的空 ...