css万能清除原理

如果现在能有清理浮动的办法,但不至于在文档中多一个没有用的空标记,这时的效果是最好的!
引入:after伪元素选择器,可以在指定的元素的内容添加最后一个子元素

.container:after{

}

如何写入内容呢? ---->content属性,写入内容

于是

.container:after{
content:".";
}

刚刚写入的内容为行内元素,而清理浮动时必须为块对象!!

所以,--->display,将行内元素转换在块级元素

于是

.container:after{
content:".";
display:block;
}

当然还需要添加clear:both属性,才能清理掉浮动,故

.container:after{
content:".";
display:block;
clear:both;
}

问题,添加的内容还可以呈现在页面效果中,所以将高度清为零

.container:after{
content:".";
display:block;
clear:both;
height:0;
}

虽然,高度清为零了,但是文本仍然显示,其实现在的文本已经超过容器规定的尺寸,现在只需要将溢出的部分进行隐藏就可以了

所以
.container:after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden
}

这样就实现了能有清理浮动的办法,但不至于在文档中多一个没有用的空标记