前端-怎么清除浮动带来的影响

1、给父元素设置高

缺点：有的模块，比如展示产品列表，因为不确定有多少产品而无法确认父元素的高

2、额外标签法

做法：在父元素内容的最后边添加块级元素，并为其设置属性clear:both;

缺点：影响html结构，不利于维护

3、单伪元素清除法

做法：用::after伪元素给父元素内容的最后边添加块级元素，并设置属性clear:both;

缺点：功能单一，不能解决外边距塌陷问题

写法：

.clearfix::after{

content:”;

display:block;

clear:both;

}

4、双伪元素清除法

作用：可以解决外边距塌陷问题，也可以清除浮动带来的影响

原理：

一、外边距塌陷的要求是：嵌套的块级元素，子元素设置margin-top会把父级元素拉下来，那父元素不设置为块级元素不就行了吗

二、清除浮动要求是父元素是块级元素，而display:table表格显示模式，和块级显示模式相似

写法：

.clearfix::before,.clearfix::after{

content:”;

display:table;

}

.clearfix::after{

clear:both;

}

5、给父元素设置overflow:hidden

优点：既可以解决外边距塌陷，又可以清除浮动带来的影响

问题：工作中不用这个来清除浮动，因为这个属性主要是为了解决溢出问题的