HTML+CSS 面试题-容器包含若干浮动元素时如何清理(包含)浮动？display,float,position的关系？Flex布局有什么优势？

容器包含若干浮动元素时如何清理(包含)浮动

容器元素闭合标签前添加额外元素并设置clear: both

父元素触发块级格式化上下文

• 块级格式化上下文，它是一个独立的渲染区域，这个区域与外部毫不相干。

• 触发条件：

  • 根元素（例如：html）
  • 元素浮动了（float 不为 none）
  • position 为 absolute 或 fixed
  • display 为 inline-block、table-sell、flex…
  • overflow 不为 visible

设置容器元素伪元素进行清理（推荐的清理浮动方法）

display,float,position的关系

如果一个元素的display属性被设置为none，那么就不会生成元素对应的框，这种情况下，float和position被忽略

display非none，如果一个元素的 position属性被设置为absolute或者fixed，这种情况下，float被忽略（float计算的值为 none），框的位置取决于属性top，right，bottom，left以及box的容器

display非none，并且position非absolute、fixed，如果float的值不为null（为left或者right），那么box是浮动的并且display的值为 block

display非none，并且position