HTML的浮动效果－清除浮动
在HTML中，如果使用了浮动（float），可能会导致父元素的高度塌陷问题，这是因为浮动的元素不再占据文档流中的空间。为了清除浮动影响，可以使用几种方法：
- 使用额外的标签，并为其应用
clear属性。 - 使用伪元素
::after清除浮动。
以下是使用伪元素 ::after 清除浮动的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix" style="background-color: #e0e0e0;">
<div style="float: left;">左侧内容</div>
<div style="float: right;">右侧内容</div>
</div>
<p>以下内容不会被浮动元素影响：</p>
<p>这是一些文本内容...</p>
</body>
</html>在这个例子中，.clearfix 类被添加到父元素上，并且 ::after 伪元素被用来清除浮动。这样父元素就能够包含浮动的子元素，并正确地显示其高度。
评论已关闭