html+css基础教程入门篇之CSS 浮动行框和清理
在HTML和CSS中，浮动（float）是一种常用的布局方式，可以让行框沿着其父元素的左侧或右侧排列。然而，当父元素的高度不足以包含所有浮动的子元素时，会出现“高度塌陷”的问题。为了解决这个问题，我们需要清理浮动。
以下是一个简单的HTML和CSS示例，演示了浮动行框和清理的基本用法：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #000;
padding: 10px;
}
.float-left {
float: left;
margin: 5px;
padding: 10px;
border: 1px solid #000;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="float-left">浮动左侧</div>
<div class="float-left">浮动左侧</div>
<!-- 更多浮动的子元素 -->
</div>
</body>
</html>在这个例子中，.container 是一个带有边框的父容器，.float-left 是浮动左侧的子元素。为了清理浮动，我们添加了一个 clearfix 类，它使用 ::after 伪元素创建一个块级元素，并应用 clear: both 属性来清理所有浮动。这确保了父元素 .container 能够包含所有浮动的子元素，从而避免了高度塌陷的问题。
评论已关闭