「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」
前言
今天总结一下浮动相关问题以及定位的相关问题，还有BFC的相关内容，这些都是面试中CSS常问的内容，是必须要了解和掌握的，在工作中也经常会遇到，特别是浮动和BFC，要是不懂其中的原理，那遇到问题就会懵的，总会遇到一些奇怪的问题
浮动引起的问题及清楚浮动
在布局中我们有时候会用到使用float的情况，这时候一定要记得清楚浮动，因为浮动会造成不少的问题，并且会让你很不容易发现问题出在哪里。
浮动所造成的问题
- 设置浮动后父元素的高度会显示为0，这样会影响到布局
- 和浮动元素同级的后一个元素会出现在浮动元素的下边 总结一句话就是浮动会引起布局出现问题。
清楚浮动的方法
- 给父级标签增加height属性
- 在浮动元素后边加一个空的块级标签，然后添加clear:both属性
- 给父级标签添加overflow:hidden或者auto属性
- 通过伪元素来清除浮动，给浮动元素的父元素加，如下
.clear::after{
content:'';
display: block;//设置block的原因是clear属性只对块级元素有效
clear:both;
}
.clear{
zoom:1;//兼容ie浏览器的时候要加上这个
}
BFC
BFC可以理解为就是一个独立于环境的一个单独的盒子，盒子内部的内容和外部的内容互相不影响
触发BFC的条件
- 根元素，body标签
- 绝对定位：absolute、fixed
- 浮动
- display的属性：inline-block、table-cell、table-caption、flex
- overflow的属性：auto、hidden、scroll
BFC的特点
- BFC中上下相邻的两个盒子的margin会发生重叠（兄弟盒子或者父子盒子）
- BFC区域和浮动的盒子是不会发生重合的（所以可以通过overflow：hidden触发BFC来实现双栏布局）
- BFC的高度包含浮动元素的高度
BFC可用于解决margin重叠问题以及子元素设置浮动后父元素高度塌陷问题（父元素设置overflow：hidden即可）
解决margin重叠问题
通过触发BFC来解决
兄弟盒子之间
- 给下边的盒子加上display:inline-block属性
- 下边盒子设置浮动属性
- 下边盒子设置定位属性
父子盒子之间
- 父盒子设置overflow:hidden属性
- 父元素设置边框border
- 子盒子设置display:inline-block属性
- 子盒子设置浮动属性
- 子盒子设置定位属性
