css - 清除浮动

一、清除浮动的原因
二、解决元素重叠
三、解决父元素高度塌陷
- 3.1 父元素高度塌陷

一、清除浮动的原因

浮动元素会脱离文档流，导致元素重叠或者父元素高度塌陷，严重破坏页面布局，所以要清除浮动

二、解决元素重叠

在不想受到浮动元素影响的元素上添加 clear:both; 即可

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素重叠</title>
    <style>
        .parent {
            width: 200px;
            height: 150px;
            color: white;
            background: black;
        }
        .child {
            width: 50px;
            height: 50px;
            background: blue;
        }
        .child:last-child {
            background: red;
        }
        .fl {
            float: left;
        }
        .cl {
            clear: both;
        }
    </style>
</head>
<body>
<h2>元素重叠</h2>
<div class="parent">
    <p class="child fl"></p>
    <p class="child"></p>
</div>

<h2>解决元素重叠 - 在不想受到浮动元素影响的元素上添加clear:both</h2>
<div class="parent">
    <p class="child fl"></p>
    <p class="child cl"></p>
</div>
</body>
</html>