【前端每日基础】day18—

【前端每日基础】day18——css清除浮动

在CSS中，浮动（float）是一种常见的布局技术，但它常常导致父容器的高度无法自动扩展以包含浮动的子元素。这时就需要清除浮动。以下是几种常用的清除浮动的方法：

使用清除元素（Clearfix）
Clearfix 是一种经典的解决方案，通过添加一个伪元素来清除浮动。可以使用现代CSS伪元素来实现。

/* Clearfix 方法 */
.clearfix::after {content: "";display: table;clear: both;
}

然后在需要清除浮动的父容器上应用 clearfix 类。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clearfix Example</title><style>.container {background-color: lightblue;padding: 10px;}.box {float: left;width: 100px;height: 100px;margin: 10px;background-color: lightcoral;}.clearfix::after {content: "";display: table;clear: both;}</style>
</head>
<body><div class="container clearfix"><div class="box"></div><div class="box"></div><div class="box"></div></div>
</body>
</html>

使用 overflow 属性
通过给父容器设置 overflow: hidden 或 overflow: auto，可以强制其包含浮动的子元素。

.container {background-color: lightblue;padding: 10px;overflow: hidden; /* 或者使用 overflow: auto; */
}

这种方法适用于内容不会溢出容器的情况，否则会导致内容被剪裁。

使用浮动后面的块级元素清除浮动
在所有浮动元素之后添加一个具有 clear: both 的块级元素。这种方法需要额外的HTML标签，不是最优雅的解决方案。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clear Both Example</title><style>.container {background-color: lightblue;padding: 10px;}.box {float: left;width: 100px;height: 100px;margin: 10px;background-color: lightcoral;}.clear {clear: both;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="clear"></div></div>
</body>
</html>

使用伪元素 :before 和 :after
这是更现代的clearfix实现，通过添加伪元素来清除浮动。

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

同样地，在父容器上应用该样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Modern Clearfix Example</title><style>.container::before,.container::after {content: "";display: table;}.container::after {clear: both;}.container {background-color: lightblue;padding: 10px;}.box {float: left;width: 100px;height: 100px;margin: 10px;background-color: lightcoral;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div></div>
</body>
</html>

使用Flexbox布局
在使用CSS Flexbox布局时，父容器会自动包含浮动子元素，因此不需要额外清除浮动。

.container {display: flex;flex-wrap: wrap;background-color: lightblue;padding: 10px;
}.box {width: 100px;height: 100px;margin: 10px;background-color: lightcoral;
}