css 块级格式化上下文（BFC）
一、块级格式化上下文（BFC）
1、什么是块级格式化上下文？
Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素 的渲染显示规则
（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）
2、触发BFC的条件如下：
- 根元素
- float的值不为none。
- overflow 除了 visible 以外的值（hidden，auto，scroll）
- display的值为table-cell, table-caption, inline-block中的任何一个。
- 绝对定位元素：position (absolute、fixed)
- 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
3、BFC 的布局规则：
- 内部的盒子会在垂直方向，一个个地放置；
- BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
- 计算BFC的高度时，浮动元素也参与计算
- 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float重叠；
4、BFC特性
1.同一BFC下外边距会发生折叠：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>外边距折叠</title>
<style>
body{
margin:0;
}
.box{
width:500px;
height:500px;
margin:0 auto;
}
.btm1{
width:100px;
height:100px;
background-color:orange;
margin:100px;
}
.btm2{
width:100px;
height:100px;
background-color:red;
margin:100px ;
}
</style>
</head>
<body>
<div class="box">
<div class="btm1">上下100margin</div>
<div class="btm2">上下100margin</div>
</div>
</body>
</html>效果图：
第一个div的下边距和第二个div的上边距发声了重叠，所以两个盒子之间距离只有100px，而不是200px。
解决方法：
- 放在不同的BFC下
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>外边距折叠</title>
<style>
body{
margin:0;
}
.box{
width:500px;
height:500px;
margin:0 auto;
}
.btm1{
width:100px;
height:100px;
background-color:orange;
margin:100px;
}
.btm2{
width:100px;
height:100px;
background-color:red;
margin:100px ;
}
.container{
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="container">
<div class="btm1">上下100margin</div>
<div>
<div class="container">
<div class="btm2">上下100margin</div>
<div>
</div>
</body>
</html>效果图：
这次我们可以清晰的看清两个中间是200px；并没用重叠。
2、BFC可以包含浮动的元素（清除浮动）
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>高度塌陷</title>
<style>
body{
margin:0;
}
.box{
width:500px;
margin:0 auto;
border:1px solid green;
}
.btm1{
width:100px;
height:100px;
background-color:orange;
float:left;
}
.btm2{
background-color:red;
}
</style>
</head>
<body>
<div class="box">
<div class="btm1">浮动</div>
<div class="btm2"></div>
</div>
</body>
</html>效果图：
由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>高度塌陷</title>
<style>
body{
margin:0;
}
.box{
width:500px;
overflow:hidden;
margin:0 auto;
border:1px solid green;
}
.btm1{
width:100px;
height:100px;
background-color:orange;
float:left;
}
.btm2{
background-color:red;
}
</style>
</head>
<body>
<div class="box">
<div class="btm1">浮动</div>
<div class="btm2"></div>
</div>
</body>
</html>
3、侵占浮动元素的问题
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>高度塌陷</title>
<style>
body{
margin:0;
}
.box{
width:500px;
overflow:hidden;
margin:0 auto;
border:1px solid green;
}
.btm1{
width:100px;
height:100px;
background-color:orange;
float:left;
}
.btm2{
width:300px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<div class="box">
<div class="btm1">浮动</div>
<div class="btm2">
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
</div>
</div>
</body>
</html>效果图：
解决方法：
通过触发btm2的BFC解决
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>高度塌陷</title>
<style>
body{
margin:0;
}
.box{
width:500px;
overflow:hidden;
margin:0 auto;
border:1px solid green;
}
.btm1{
width:100px;
height:100px;
background-color:orange;
float:left;
}
.btm2{
width:300px;
height:300px;
background-color:red;
}
.bb{
overflow:hidden
}
</style>
</head>
<body>
<div class="box">
<div class="btm1">浮动</div>
<div class="bb">
<div class="btm2">
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
欢迎大家观看！
</div>
</div>
</div>
</body>
</html>
效果图：
持续更新，欢迎大家指教！
css 块级格式化上下文（BFC）的更多相关文章
- css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- 块级格式化上下文(BFC)
一.什么是BFC 具有BFC属性的元素也属于普通流定位方式,与普通容器没有什么区别,但是在功能上,具有BFC的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且具有普通容 ...
- 详解块级格式化上下文（BFC）
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
- 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块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- BFC 详说 Block Formatting Contexts (块级格式化上下文)
定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...
- 基础总结（02）--BFC（块级格式化上下文）
BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...
随机推荐
- 手机H5设计尺寸
手机型号 导航栏和状态栏的高度 宽度 高度 可视区域高度 iPhone 4 (4, 4S) 64px 320px 480px 416px iPhone 5 (5c, 5s) 64px 320px 56 ...
- 转: Github上关于iOS的各种开源项目集合
https://blog.csdn.net/jiashaoying/article/details/79079500 下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件. ...
- MySQL慢日志分析之pt-query-digest
http://www.php.cn/mysql-tutorials-357655.html 监控慢日志: pt-query-digest 切割分析慢日志 anemometer 删掉垃圾查询 pt-ki ...
- ORACLE表空间offline谈起，表空间备份恢复
从ORACLE表空间offline谈起,表空间备份恢复将表空间置为offline,可能的原因包括维护.备份恢复等目的:表空间处于offline状态,那么Oracle不会允许任何对该表空间中对象的SQL ...
- 认识DOM（上）
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- nw打包vue项目exe
首先需要下载nw,然后解压打开,如图: 在以上新建一个同级项目文件夹,然后把把项目打包,将dist中的static文件夹与index.html放入,并新建一个package.json(可使用npm i ...
- SpringMVC学习01——HelloSpringMvc Demo
HelloWorldController.java文件 package com.su.controller; import org.springframework.stereotype.Control ...
- Centos 下更改MySQL源数据存放目录（datadir）
MySQL在安装完成之后,其源数据默认存放在 /var/lib/mysql/ 目录下,一般情况下,该目录在根目录下,由于Linux系统默认 根目录所在挂载的磁盘容量有限,随着生产数据的不断产生,该目 ...
- 浅谈Java反射机制 之 获取类的字节码文件 Class.forName("全路径名") 、getClass()、class
另一个篇:获取 类 的 方法 和 属性(包括构造函数) 先贴上Java反射机制的概念: AVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它 ...
- 安全运维 - Windows系统攻击回溯
Windows应急事件 病毒.木马.蠕虫 Web服务器入侵事件或第三方服务入侵事件 系统入侵事件 网络攻击事件(DDOS.ARP.DNS劫持等) 通用排查思路 获知异常事件基本情况 发现主机异常现象的 ...