css clear + bfc

1. clear 属性：清除浮动影响

1. 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关的浮动元素外边界的下方

<div style="float: left;">浮动内容</div>
<div style="clear:both"></div>

相关浮动元素指的是在相同块级格式化上下文中的位于该元素之前的浮动元素

2. BFC（Block Formatting Context）：独立布局环境

块级格式化上下文是指网页的一部分区域，元素将基于这块元素布局，将内部的内容与外部的上下文隔离开

1. bfc有以下特点：

• 排除外部浮动元素，bfc不会与外部浮动元素的盒子重叠
  普通div和float:
  
  只是文本看起来避开浮动了，其实背景和边框还是在重叠中
  bfc和float:
  
  是真正的避开了浮动元素
• 包含内部浮动元素（清除浮动时） ,包含所有的内部浮动防止高度塌陷
• 阻止 1. 父子元素的外边距折叠
  ❌不阻止
  1. bfc与另一个bfc的外边距重叠：
  2. 内部兄弟元素之间的 margin 重叠

2. 哪些元素可以形成BFC？

• float: left right 不为none
• overflow: hidden auto scroll 不为visible
• display: inline-block table-cell table-caption flex inline-flex grid inline-grid
• position: absolut fixed
• 网页的根元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context