css为什么清除浮动

CSS清除浮动（Clearing Floats）是指解决浮动元素对周围元素布局影响的一种方法。当一个元素被设置为浮动（float），它会脱离正常的文档流，这可能会导致父元素高度塌陷（高度无法正确计算），以及影响其他元素的布局。

基础概念

浮动（Float）是CSS中的一种布局技术，允许元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。

类型

左浮动：float: left;
右浮动：float: right;

应用场景

图文混排：使文字环绕在图片周围。
多栏布局：创建并排的列。

问题及原因

当一个元素内部包含浮动元素时，如果没有适当的清除浮动，父元素可能无法正确计算其高度，导致高度塌陷。这是因为浮动元素不再占据原来的空间，父元素就会认为没有内容，从而高度为零。

解决方法

使用clear属性：在浮动元素之后的元素上设置clear属性，阻止该元素跟随浮动元素。
使用clear属性：在浮动元素之后的元素上设置clear属性，阻止该元素跟随浮动元素。
使用overflow属性：在父元素上设置overflow属性为auto或hidden，这会创建一个新的块格式化上下文，从而使父元素包含浮动元素。
使用overflow属性：在父元素上设置overflow属性为auto或hidden，这会创建一个新的块格式化上下文，从而使父元素包含浮动元素。
使用伪元素：在父元素上使用:after伪元素来清除浮动。
使用伪元素：在父元素上使用:after伪元素来清除浮动。
Flexbox布局：使用Flexbox布局可以避免浮动带来的问题，因为Flexbox提供了更强大的布局控制。
Flexbox布局：使用Flexbox布局可以避免浮动带来的问题，因为Flexbox提供了更强大的布局控制。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动示例</title>
<style>
    .parent {
        border: 1px solid black;
        overflow: auto; /* 清除浮动 */
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <p>这是一些文本，它应该正常显示在浮动元素旁边。</p>
</div>
</body>
</html>