浅谈对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等,我们要满足以上所 ...
随机推荐
- AOP注解方式ApsectJ开发
AOP注解方式ApsectJ开发 引入配置文件 编写切面类配置 使用注解的AOP对象目标类进行增强 在配置文件中开启以注解形式进行AOP开发 在切面类上添加注解 注解AOP通知类型 @Before前置 ...
- 人物-IT-李想：百科
ylbtech-人物-IT-李想:百科 李想,1981年10月出生于河北石家庄,80后企业家代表人物.曾先后创立泡泡网.汽车之家,现任车和家创始人及CEO. 1998年还在上高中的李想就开始做个人网站 ...
- 运维笔记--ubuntu安装指定版本的RabbitMQ
场景描述: 日常开发or生产环境经常会需要安装指定版本的软件,出于和其他软件的配合兼容性,以及稳定性的考虑. 现在我们的需求是安装指定版本的RabbitMQ,版本号: 操作步骤: 注意事项: 异常处理 ...
- <img>的title和Alt有什么区别？
Alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示,读屏器阅读图片. title 可提高图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析.鼠 ...
- MSYS2 常见操作
博客转自:http://www.cnblogs.com/vincenzo/archive/2010/05/13/1734230.html 和 https://blog.csdn.net/langres ...
- JVM 线上故障排查基本操作--CPU飙高
JVM 线上故障排查基本操作 CPU 飚高 线上 CPU 飚高问题大家应该都遇到过,那么如何定位问题呢? 思路:首先找到 CPU 飚高的那个 Java 进程,因为你的服务器会有多个 JVM 进程.然后 ...
- Swift编码总结5
1.UIWindow属性: 1>.- (void)becomeKeyWindow; // override point for sub ...
- Graphviz(01) notepad++ Run xxx.gv
1.新建文件dot.bat 放到 d:\,内容如下: set gvname=%% @echo '"d:\dot.bat" "$(FULL_CURRENT_PATH)&qu ...
- 【计算机视觉】【神经网络与深度学习】YOLO v2 detection训练自己的数据2
1. 前言 关于用yolo训练自己VOC格式数据的博文真的不少,但是当我按照他们的方法一步一步走下去的时候发现出了其他作者没有提及的问题.这里就我自己的经验讲讲如何训练自己的数据集. 2.数据集 这里 ...
- layui的select监听
首先,select一定要放在<form class="layui-form" ></form>里面 然后,加监听<select id="id ...