html去除浮动影响content,CSS为何要清除浮动

css为什么要清除浮动？

1、很多情况下，如果我们使用了float特效，出现margin，padding设置不能正确显示，浮动会导致父级子级之间设置了padding，导致了属性不能正常传达，导致margin不能正常显示，所以我们要清除浮动。

2、导致背景不能显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。

3、边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。

清除浮动的方法：

使用after伪类清除浮动

css代码：.clearfix::after {

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

/* ie6清除浮动的方式，为兼容ie6-ie7浏览器 */

*zoom: 1;

}

使用before和after双伪元素清除浮动

css代码.clearfix::before,

.clearfix::after {

content: "";

/* 触发BFC清除浮动 */

display: table;

}

.clearfix::after {

clear: both;

}

.clearfix {

*zoom: 1;

}