2020-11-07 CSS清除浮动的方法

(新手理解，有不对的地方希望大家指正)

浮动带来的影响

1. 浮动元素不再占用位置，会造成兄弟元素的遮盖问题
2. 子元素浮动之后，可能造成父元素高度坍塌的问题

如何清楚浮动带来的影响

开启BFC清除浮动带来的高度坍塌问题

1. 给父元素设置 overflow:hidden; 或者auto;
2. 给父元素设置 display:flow-root;
3. 给父元素设置 display:inline-block;(这个设置之后，父元素完全由内容撑开，宽度不再是之前的 100%)
4. 给父元素设置 position:absolute; 或者 fixed;(这个设置之后，父元素完全由内容撑开，宽度不再是之前的 100%)
5. 给父元素设置 float:left; 或者right;(使用这种方法会改变父元素的位置)
   开启BFC只能解决坍塌问题，兄弟元素的遮盖问题无法解决

清除浮动带来的兄弟元素遮盖问题

1. 给受到浮动影响的兄弟元素添加 clear:both; 属性；
2. 因为整篇代码中可能经常使用清除浮动的样式，多以我们将清除浮动的属性封装，使用的时候直接添加属性名就可以了

.clearfix{
	content:'';
	display:block;
	clear:both;
}