清除浮动的方法

2021-07-27 15:59发布

  1. 额外标签法也称为隔墙法,是W3C推荐的做法

  2. 父级添加overflow属性

  3. 父级添加after伪元素

  4. 父级添加双伪元

5.4.1额外标签法

  • 额外标签法会在浮动元素末尾添加一个空的标签

  • 注意:要求这个新的空标签必须是块级元素

  • 优点:通俗易懂,书写方便

  • 缺点:添加许多无意义的标签,结构化较差

  • 例如<div style="clear:both"></div>,或者其他标签(如</br>等)

5.4.2overflow

  • 可以给

    父级

    添加overflow属性,将其属性值设置为hidden,autoscroll

  • 优点:代码简洁

  • 缺点:无法显示溢出的部分

5.4.3after伪元素法

5.4.4双伪元素

  • 也是给父元素添加

5.4.5总结

为什么需要清除浮动?

①:父级没高度

②:子盒子浮动了

③:影响下面布局了,我们就应该清除浮动了。