1. 浮动
浮动的影响：
- 脱离文档流，不占据页面空间，但文字流没有脱离。 > 也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。 而position的absolute和fixed全部脱离，即脱离了“文档流”，也脱离了“文本流”，但浮动是仅脱离“文档流”，属于“半脱”状态。
- 浮动会将行内元素和行内块元素转化为块元素，体现在对此行内元素设置宽高会起作用了。
- （因子元素脱离文档流而导致父元素塌陷）高度塌陷：如果父元素不设置高，或者设置最小高，高度由内容撑开，一旦内容浮动后不占位，就会出现高度塌陷。
解决高度塌陷，引申为清除浮动，确切来说是清除浮动带来的影响：
- 通过触发BFC清除浮动
- 通过其他方式清除浮动：
-
- 在浮动的下边设置一个空盒子，给空盒子清除浮动clear:both; 把父元素撑开，需要注意的是，这个盒子必须是块元素，不是的话需要转换display:block；但会增加多余的元素。
-
- 给父元素设置高度，但不推荐，不适用于高度不确定的元素
-
- 给父元素新增类.clearfix，这个用到了一种伪类，::after
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
//overflow: hidden;
//overflow隐藏不占位，而visibility隐藏但占位，二选一
}
//要考虑版本的兼容性的话可以设置属性zoom:1;
//在IE6中没有BFC，但是有一个和BFC类似的hasLayout，在IE6中可以通过开启hasLayout来解决高度塌陷的问题，而开启hasLayout的方式就是设置zoom:1;
补充： 文档流原文是"normal flow"，也有人叫普通流、正常流，指语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。 [关于文档流](CSS 之 文档流 - 掘金 (juejin.cn))
2. 什么是BFC? BFC的作用? 生成BFC的条件?
定义： BFC，块级格式化上下文，可以理解为这是一个独立的渲染区域，在这个区域里面，浮动元素参与高度计算。
作用：
- 防止margin重叠（塌陷）
- 清除浮动
- 自适应多栏布局
- 阻止元素被浮动元素覆盖
哪些元素会生成 BFC：
- 根元素，即HTML元素
- float 不为 none 的元素
- position 为 fixed 和 absolute 的元素（脱离文档流）
- display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
- overflow 不为 visible 的元素，为 auto、scroll、hidden
