BFC与清除浮动总结

1.BFC是什么？清除浮动是什么？

1. BFC叫作块级格式上下文，BFC是一个渲染规则。
2. 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
3. 只要触发了这些规则就会对这个块级区域， 重新计算父子元素之间的关系和子元素的高度，从而重新计算出父元素的高度在渲染

清除浮动的原理：clear属性，让这块的元素触发 BFC

1.清除浮动的方法？形成BFC的常见条件？

清除浮动的方法：
1. 利用 clear 属性
	父元素内部末尾增加一个额外标签，如空div，使用 clear:both
	使用伪类元素，再用伪类元素清除浮动，注意：伪类必须设置 content 属性才会生效，再写入 clear:both
2. 触发 BFC

BFC 的触发条件：
1. 根元素 
2. float 取值 none 以外的值 
3. overflow 除 visible 以外的值 (hidden，auto，scroll)
4. display (table-cell，table-caption，inline-block，flex，inline-flex) 
5. position (absolute，fixed)

3.BFC的作用？

BFC的作用:
1. 防止垂直方向 margin 重叠，防止高度塌陷
2. 不被浮动元素覆盖 
2. 自适应两栏布局
3. 清除内部浮动，即可以包含浮动元素

4.伪类与为元素

伪类用于向某些选择器添加特殊的效果   (.box:hover)
伪元素用于将特殊的效果添加到某些选择器   
.box::after{
    content:"";
    display:block;
    clear:both;
}

本文地址：https://blog.csdn.net/qq_44818085/article/details/109363585