css-清除浮动的四种方式
为什么需要清除浮动?
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。
清除浮动即清除浮动元素造成的影响,如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流。
策略是: 闭合浮动
①额外标签法。在浮动元素末尾添加一个空的标签。或者其他标签(如
等)。 必须是块级元素。
优点: 通俗易懂,书写方便。
缺点: 添加许多无意义的标签,结构化较差。
②给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll
优点:代码简洁。
缺点:无法显示溢出的部分。
③:after 伪元素法。
给父元素添加
④ 双伪元素清除浮动
给父级添加