1. BFC
1.BFC是什么
image.png
Span是盒子，div也是盒子。
所有的盒子都是FC，格式化上下文。
可能是BFC或者IFC。
块级盒子是BFC。
行内元素是IFC。
Div/p/h1/h2参与到BFC的布局中。
A/span/img/i参与到IFC的布局中。
2.什么可以形成一个BFC环境
image.png
块级元素所在的布局就是BFC。也就是块级元素都是在BFC中布局的。
比如div和p，他们两个在一起布局的那个上下文环境就是BFC。如果突然出现了一个a元素，那么a元素就在IFC里面布局。
什么情况下会形成BFC呢？
Html元素里面是按照BFC布局的。
浮动的元素也会形成BFC。
行内块级元素也会形成BFC。
Overflow：hidden， visible， auto, scroll.
就是比如一个div，你啥都没有设置的话，那么它还是在html这个BFC中进行布局的，
如果给这个div设置 以下，那么这个div就会自己形成一个新的BFC环境。
/* .box {
overflow: auto;
} */
触发条件
触发BFC的条件包含不限于：
根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed
3. BFC排列规则
image.png
BFC就是块级元素进行布局的一种规则。
里面一旦由行内及元素，那么会按照IFC的方式在一行里面进行排布。一个行盒本质上就是一个IFC。
Html可以形成一个BFC
Html里面有body。
- 在BFC中，box会在垂直方向上一个挨着一个的排布；
2. 垂直方向的间距由margin属性决定；
3. 在同一个BFC中，垂直方向相邻两个box之间的margin会折叠（collapse）； p
4. 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；
4. BFC的作用-解决折叠问题
image.png
给body里面的两个兄弟div，一个设置margin-bottom50，一个margin-top为50
image.png
最后出来的是只有一个50，出现了上下margin折叠。
如果给第一个div设置overflow:auto;让第一个div形成一个新的BFC。只要overflow不是visible，都可以形成BFC。
image.png
发现还是margin只有一个50px，还是出现了折叠。
这是因为这两个 div是在html形成的BFC里面，而且div1形成了一个新的BFC，但是div1这个盒子本身还是在html形成的BFC里面 ，所以div1和div2还是属于同一个bfc里面的盒子，3. 在同一个BFC中，垂直方向相邻两个box之间的margin会折叠（collapse）
所以如果要解决这个问题，那么就在div1外面再包裹一个div，然后给这个div设置overflow:auto;
image.png
就可以看到这个问题解决了，这是因为container和box2是一个BFC中，但是box1是在另外一个BFC中，而且container并没有margin值，所以他们不存在折叠现象。
如果继续给container设margin-bottom，那么contianer和box2就会继续产生上下margin折叠。
5. BFC的作用-解决浮动高度塌陷
5
以前是给父盒子加一个伪元素，
clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
.clear_fix:after{
Content:””；
Clear:both;
Display:block }
以下是固定写法，进行浏览器兼容。
image.png
事实上，BFC解决高度塌陷需要满足两个条件：
- 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
也就是给父元素设置overflow:hidden;
2.浮动元素的父元素的高度是auto的；(不设置的话，height的默认值就是auto，不设置也可以)
◼ BFC的高度是auto的情况下，是如下方法计算高度的
1.如果只有inline-level，是行高的顶部和底部的距离；
2.如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
3.如果有绝对定位元素，将被忽略；
4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘。
网友评论