css中的clear的作用是什么

CSS 中 clear 属性的作用

clear 属性用于控制一个元素与浮动元素之间的关系，确保非浮动元素不会流到浮动元素的下方。

用法

clear: none | left | right | both;

作用

立即学习“前端免费学习笔记（深入）”；

当元素浮动时，它们会被置于文档流之外，后面的非浮动元素会流到浮动元素的下方。clear 属性通过设置非浮动元素的 clear 值，使其强制在浮动元素的上方开始。

例如，以下代码将确保段落元素不会流到浮动图像的下方：

p {  clear: both;}

示例

假设有以下 HTML 代码：

<div class="container">  <div class="image float-left"></div>  <p>段落</p></div>

如果未设置 clear 属性，段落元素将流到图像元素的下方，导致布局混乱。

通过设置 clear 属性，可以确保段落元素在图像元素的上方开始：

.container {  width: 500px;}.image {  float: left;  width: 200px;  height: 200px;  background: #f00;}p {  clear: both;}

在此示例中，段落元素强制在图像元素的上方开始，从而使布局清晰明了。