【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 ...
随机推荐
- linux设置脚本开机自启
由于在centos7中/etc/rc.d/rc.local的权限被降低了,所以需要赋予其可执行权 chmod +x /etc/rc.d/rc.local 赋予脚本可执行权限假设/opt/script/ ...
- R-CNN/Fast R-CNN/Faster R-CNN
一.R-CNN 横空出世R-CNN(Region CNN,区域卷积神经网络)可以说是利用深度学习进行目标检测的开山之作,作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂,2 ...
- 亿级在线系统二三事-网络编程/RPC框架 原创： johntech 火丁笔记 今天
亿级在线系统二三事-网络编程/RPC框架 原创: johntech 火丁笔记 今天
- 使用极路由进行外网映射，本地电脑做服务器，运行javaWeb项目
最近在学习javaWeb,一个项目需要android访问服务器,于是使用自己的笔记本电脑作为服务器,需要进行端口映射.使得外网可以访问自己的javaWeb项目或者网站之类的.普通路由请看:http:/ ...
- c++ for_each
#include<iostream>#include<algorithm>#include<vector>using namespace std; int main ...
- JAVA 基础编程练习题41 【程序 41 猴子分桃】
41 [程序 41 猴子分桃] 题目:海滩上有一堆桃子,五只猴子来分.第一只猴子把这堆桃子凭据分为五份,多了一个,这只猴子把 多的一个扔入海中,拿走了一份.第二只猴子把剩下的桃子又平均分成五份,又多了 ...
- 比特币区块的hash算法
Block hashing algorithm Bitcoin mining uses the hashcash proof of work function; the hashcash algori ...
- React Native Expected a component class,got [object Object]解决
报错原因: 组件大小写错误. 解决方式: 修改组件名称即可. 这篇博客介绍了大部分RN的错误原因和解决方法: http://blog.csdn.net/chichengjunma/article/de ...
- js 匿名函数 js-函数定义方法
1.任何函数都是有返回值的,没有返回值的,在某些语言里称之为过程例如PL/SQL 2.js中的函数如果没有return 关键字指明给出的返回值,那么当调用完函数后,会返回“undefined" ...
- Unity学习笔记_控制人物移动+摄像机跟随
我想做的移动操作方式类似[流星蝴蝶剑].[龙之谷].[我的世界第三人称]的第三人称操作方式. 操作说明:W键会朝当前镜头方向前进,鼠标控制镜头旋转. 做前需知(先去稍微了解一下比较好): ①unity ...