什么是BFC、
块级格式化上下文
Box 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。
元素的类型 和 display 属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。
Formatting Context （格式化上下文）是页面的一块渲染区域，并且有一套渲染规则，
决定了其子元素如何定位，以及和其他元素的关系和相互作用
Formatting Context 包含 BFC(Block formatting context); IFC (Inline formatting context)，
FFC (Flex formatting context) 和 GFC (Grid formatting context)
BFC范围：一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
BFC效果：BFC的最显著的效果就是建立一个隔离的空间，断绝空间内外元素间相互的作用
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此，包括浮动和外边距合并等等，有了这个特性我们布局的时候就不会出现意外情况了。
BFC布局规则
*BFC内，盒子依次垂直排列
*BFC内，两个盒子的垂直距离有margin属性决定，属于同一个BFC的两个相邻Box的margin会发成重叠
【符合合并原则的margin合并后是使用最大的margin】
*BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）
即使存在浮动的情况下也是如此，除非创建新的BFC
*BFC的区域不会和float box重叠
*BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此
*计算BFC的高度时,浮动元素也参与计算
如何创建BFC
*根元素
*浮动元素（float属性不为none）
*绝对定位元素（position为absolute或fixed）
*overflow不为visible的块元素
*内联块（元素具有display:inline-block）;
*表格单元格(元素具有 display: table-cell，HTML表格单元格默认属性)
*表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
BFC的应用
1.防止margin重叠（同一个BFC内的两个相邻的BOX的margin会发生重叠，触发生成两个BFC，即不会重叠）
2.清除内部浮动（创建一个新的BFC，因为根据BFC的规则，计算BFC的高度时，浮动元素也参与计算）
css浮动后的元素无论display是什么都默认为block，即使设置了inline也是block
方法一.使用overflow属性清除浮动
先找到浮动盒子的父元素，添加属性overflow：hidden,形成BFC，浏览器会给BFC创建隐式的外边距来阻止他和浮动元素的外边距叠加。
当给一个挨着浮动的BFC添加负外边距，不会起作用
方法二：给浮动元素添加一个额外的标签 .claer{clear: both}
a:内部标签，会将这个浮动盒子高度重新撑开
b:外部标签：会将这个浮动盒子的影响清除，但是不会影响父盒子
注意：一般情况下不会使用这个方式清除浮动，因为这种清除浮动会增加页面的标签，造成结构的混乱
方法三：使用伪元素来清除浮动（一般使用这种）
clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
lineheight:
0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
clearfix{
zoom:1 // 为兼容IE
}
网友评论