css 伪元素清除浮动 |css 立体垂直分割线

.clearfix::before, .clearfix::after {
content:"";
display:table;
}
.clearfix::after {
clear:both;
}

上面的代码定义了两个伪元素:before和:after。这两个伪元素的content属性设置为空，而display属性设置为table。这样一来，它们就会被视为一个包含元素，并且可以清除浮动。

在实际使用中，大家可以给需要清除浮动的元素添加一个clearfix类，然后在样式表中定义相应的样式，这样就可以轻松实现浮动清除的效果。

左浮动元素
右浮动元素

上面的代码演示了如何使用clearfix类来清除浮动。大家给父元素添加了clearfix类，然后在样式表中定义了如下样式：

.float-left {
float:left;
}
.float-right {
float:right;
}
.clearfix::before, .clearfix::after {
content:"";
display:table;
}
.clearfix::after {
clear:both;
}

这样一来，就可以确保左右两个浮动元素都会在父元素内正确地排列，而不会出现布局问题。