css小要点1.0（BFC、清除浮动、伪类伪元素）

最近学习到了BFC、清除浮动、伪类伪元素的知识，在这里给大家带来我自己的理解，如有帮助鼓励一下吧

BFC

定义BFC

定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域。是css一个隐含的属性，有隔离保护的作用

通常可以解决的问题

1.高度塌陷
在浮动布局中，由于浮动的子元素会脱离标准文档流，这样会使父元素的高度丢失，父元素高度丢失
，包含块没有设置高度或者是自适应的时候、包含块就不能撑起来，变成塌陷的状态
2.利用BFC避免margin重叠。
3.自适应两栏布局（这个没怎么了解，只是在查资料的时候看到了，后面再回来补充）

设置BFC的方法

position：abcolute或fixed
float：不是none即可
overflow：不是visible
display：inline-block或flex
根元素

开启之后的特点

1.开启的元素不会被浮动元素所覆盖
2.开启的元素子元素和父元素的外边距不会重叠
3.开启的元素可以包含浮动的子元素

清除浮动

为什么要清除浮动

浮动塌陷
包含块没有设置高度或者是自适应的时候、包含块就不能撑起来，变成塌陷的状态

方法

1. 给前面的父元素盒子添加高度（一般是不能用的）
2. 在浮动元素的最下面加一个块级元素并设置claer：both
3. 给前面的盒子添加伪元素after来清除浮动（最为推荐的方法）
4. 给父元素开启BFC
   给父元素设置overflow：hidden或auto等等

关于伪类和伪元素

因为涉及到了dom的一些知识，触及到知识盲区了，这里就简单看一看我写的思维导图吧，之后回来补充。