2020-11-20

css-清除浮动的四种方式

为什么需要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

清除浮动即清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

策略是: 闭合浮动
①额外标签法。在浮动元素末尾添加一个空的标签。或者其他标签（如
等）。 必须是块级元素。
优点： 通俗易懂，书写方便。
缺点： 添加许多无意义的标签，结构化较差。
②给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll
优点：代码简洁。
缺点：无法显示溢出的部分。
③:after 伪元素法。
给父元素添加

④ 双伪元素清除浮动
给父级添加