【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 ...
随机推荐
- 黑马vue---61、为什么vue组件的data要是一个函数
黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...
- HttpServletRequest&HttpServletResponse对象
HttpServletRequest&HttpServletResponse对象不是由我们来创建的,而是由tomcat服务器创建,那么我们就可以直接来使用这两个 对象 A: HttpServl ...
- 漫谈Objective-C在语法上的改进
Objective-C 2.0从2006年正式发布至今已经有10年了.Apple在此期间也不断地为其注入新的语法特性,比如Blocks.NSNumber literal.NSArray literal ...
- 如何在CentOS 7上安装Memcached（缓存服务器）
首先更新本地软件包索引,然后使用以下yum命令从官方CentOS存储库安装Memcached. yum update yum install memcached 接下来,我们将安装libmemcach ...
- php操作成功返回当前页并刷新
echo "<script>alert('操作成功');location.href='".$_SERVER["HTTP_REFERER"].&quo ...
- linux 测试磁盘iops 方法详解
一.FIO安装 wget http://brick.kernel.dk/snaps/fio-2.0.7.tar.gz yum -y install libaio-devel tar -zxvf ...
- Qt编写自定义控件32-等待进度条控件
一.前言 在各种各样的执行任务界面,有时候需要比较多的时间,需要给出一个直观的等待进度条表示当前正在执行的进度,而不至于懵逼在那里,用户不会觉得程序死了还是干嘛了. 等待进度条有好几种办法,比如直接叫 ...
- javaweb大文件上传
本文主要关于利用html表单上传文件的后台代码实现. 需要用到两个工具类Apache commons-fileupload和commons-io. 注意要校验是否选择文件上传,最开始写的时候没有加上校 ...
- django ORM中的复选MultiSelectField的使用
下载和介绍: https://pypi.org/project/django-multiselectfield/ 在django ORM的使用中,经常会出现选择的情况,例如: class person ...
- ES6 javascript 实用开发方法技巧分享
定义变量/常量 ES6 中新增加了 let 和 const 两个命令,let 用于定义变量,const 用于定义常量 两个命令与原有的 var 命令所不同的地方在于,let, const 都是块级作用 ...