浅谈对BFC的认识，以及用bfc解决浮动问题
我们在前端的学习过程中常常会遇到BFC，用BFC来解决一些margin塌陷、margin合并清理浮动流的问题
那么问题来了，我们所说的BFC到底是个什么东西呢；
什么是BFC
BFC（Block Formatting Context）即“块级格式化上下文。我来简单的解读一下：
1.块级对应单词Block，不难想到的就是display中block属性，block属性是将此元素作为块级元素显示，根据块级元素的特性进行渲染，具体的特性下文再来细说。
2.格式化Formatting，格式化这个此相信不用我细说，就是回归元素最原始的状态，即刚开始被定义时的状态。
3.上下文Content我们很熟悉，在js中上下文是一个函数执行前被定义好的的一个环境，是外部数据的集合。在这里好像还是有一点点联系的。
综合在一起就是：我们在定义块级元素，块级元素在刚刚被生成的时候（即初始化）需要规定一些规则来在浏览器上布局显示这个块级元素，这些规则也就块级元素所处的环境将成为块级元素与其他元素之间的特性。
简单来说，就是你是块级元素，浏览器在布局时有自己一套对块级元素布局的规则，身为块级元素你得按照我（浏览器）的规矩来。
那么为什么在我们在布局的时候会出现一些我们不期望的结果（如浮动脱离文档流和margin合并的问题）
慢慢来，首先就要说说BFC布局的规则是什么以及普通文档在布局是的规则又是什么？
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
转自：https://www.cnblogs.com/CafeMing/p/6252286.html
定位方案是控制元素的布局，常见的有三种：
普通流（normal flow）
其实就是元素按照再HTML中的先后位置之上而下布局，在这个过程中，行内元素水平排列，直到当行被沾满然后换行，块级元素则会被渲染为完整的一个新行，除非另外制定，否则所有元素默认都是普通流定位，也可以说，普通六中元素的位置由该元素再HTML文档中的位置决定。
浮动（float）
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能地向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
绝对定位（absolute positioning）
在绝对定位布局中，元素会整体脱离普通六，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
BFC 布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
转自：https://blog.csdn.net/AmberWu/article/details/79543896
以上是我看的两个对流布局的理解（网上特别多，说法各有不同各有千秋）
如何触发BFC
只要元素满足下面任一条件即可触发BFC特性：
body根元素
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）
用BFC来解决布局上的一些问题
1.margin合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
width: 100px;
height: 100px;
background: #f00;
margin-bottom:100px;
}
.bottom{
width: 100px;
height: 100px;
background: #0ff;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div> </body>
</html>
可以看到两方块的上下margin只有200px，按照代码来说应该是上面的100加上下面的200，最后值为300px才对，上面的margin-bottom的100px与下面margin-top重叠了，出现了margin合并
问题出现的原因：两个块级元素处在同一个BFC环境下，同一BFC环境下的子元素margin上下会互相影响（这其实就是个bug，到我发稿为止还没完善）
解决办法：将两个元素放到不同的BFC环境下就好了，如把第二个方法bottom放到另一个bfc容器内，top中的margin-bottom是在A BFC（body）环境下的，而bottom中的margin-top实在B BFC（box）环境下的，每一个BFC都是独立的，BFC内部元素的布局不会对外部造成影响，这样一来问题就解决了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
width: 100px;
height: 100px;
background: #f00;
margin-bottom:100px;
}
.box{
overflow: hidden;/*bfc*/
}
.bottom{
width: 100px;
height: 100px;
background: #0ff;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="box">
<div class="bottom"></div>
</div>
</body>
</html>
2.margin塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
}
.inner{
width: 50px;
height: 50px;
background: blue;
margin-top:50px;
}
</style>
</head>
<body> <div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
我们想要的效果是inner盒子距离outer盒子上边距有一个50px的margin，但是实际情况是inner的margin与outer的margin重叠了，原理上与margin合并一样。
出现的原因：两个盒子处于同一个BFC环境下
解决方法：让outer盒子变成BFC元素，让里面inner单独处于一个BFC环境
.outer{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
overflow: hidden;
}
3.清除浮动流
最常见的情况就是用一个div来包裹浮动元素
有浮动流的情况下下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
border: 2px solid black;
margin:100px;
}
.inner{
width: 100px;
height: 100px;
float: left;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner red"></div>
<div class="inner green"></div>
<div class="inner blue"></div>
</div>
</body>
</html>
可以看的的是外面的outer并没有被内容所撑开
为什么会出现这样的情况呢
首先要先说一下什么是浮动流：浮动流是浮动元素的一种布局方式，浮动让行内元素或块元素自动转化为行内块元素。
浮动元素会脱离当前的文档流，后面出现的非浮动元素在排版时还是会按照原来的文档流来排版，所以会出现浮动元素和正常元素重叠的情况。
浮动元素脱离的只是当前的文档流，在给父级outer加margin的时候浮动元素也会跟着父级移动。
float属性在一开始的时候是为了报纸排版才产生的，所以文本类的元素能够感知到浮动流，并在浮动元素的周围排列形成文字环绕。
出现问题的原因：浮动元素处于浮动流，与普通元素所处的流层不一致，所以布局排版时是按照两个规则来布局的
解决方法：整个放到一个BFC环境下，使用同一个规则。只想要float的特性，不想要浮动流对布局的影响。
.outer{
border: 2px solid black;
margin:100px;
overflow: hidden;
}
以上就是我对BFC的认识和对浮动流的理解，如何有什么错的地方或者是问题欢迎大家一起来讨论
浅谈对BFC的认识，以及用bfc解决浮动问题的更多相关文章
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- BFC 浅谈
写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...
- 浅谈BFC与应用
什么是BFC BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文.它是一个独立渲染的区域,规定了内部如何布局,同时不受外界的影响.我们的根元素本身就是一个 ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
- 浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
- 浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
随机推荐
- python安装redis库
pip install redis 没有相应的资源 可以到redisio上找到clients, https://redis.io/clients 如下所示 下图中带黄五角星的为官方推荐的: 下 ...
- #C++初学记录（STL容器以及迭代器）
STL初步 提交ACM会TLE /仅以学习STL与迭代器使用 C. Cards Sorting time limit per test1 second memory limit per test256 ...
- SpringBoot框架 之 Druid与Swagger2
目录 Druid Druid连接池配置 Druid数据监控 集成Swagger2 Swagger2简介 1.添加依赖 2.创建Swagger2配置类 3.在控制器方法上添加对应api信息 4.启动Sp ...
- Java实现批量将word文档转换成PDF
先导入words的jar包 需要jar包的私聊我发你 代码如下:import com.aspose.words.Document;import java.io.File; public class W ...
- android: android 布局中的weight 属性
android: weight是线性布局的特有属性,控件的宽度和高度的不同,也会存在差异. 示例1:将宽度设置为包裹类型wrap_content或0dp <?xml version=" ...
- 品优购商城项目（五）消息中间件 ActiveMQ
消息中间件用于降低各个项目模块的耦合,适用于不需要等待返回消息才能进入下一个业务环节的模块,以及实时要求性不高的业务模块. 一.JMS JMS(Java Messaging Service)是Java ...
- python初级(302) 4 函数
一.函数 1.函数定义: 可以完成某个工作的代码块.这是可以用来构建更大程序的一个小部分. 2.创建或定义函数要使用def关键字 3.创建一个函数 1) def 关键字 2)函数名及后面跟随的括号 3 ...
- [Bayes] Concept Search and PLSA
[Topic Model]主题模型之概率潜在语义分析(Probabilistic Latent Semantic Analysis) 感觉LDA在实践中的优势其实不大,学好pLSA才是重点 阅读笔记 ...
- Linux云主机（离线）搭建本地yum源
下载CentOS镜像 http://mirror.nsc.liu.se/centos-store/7.3.1611/isos/x86_64/ 离线yum源的配置 1.上传下载的镜像源iso 2.挂载i ...
- （生鲜项目）01. Vue环境搭建
第一步: nodejs安装 https://nodejs.org/en/download/ 说明安装成功 第二步: cnpm 由于npm需要很多的依赖包,这些包下载都很慢,所以就有了cnpm : ht ...