css中的clear属性

最新推荐文章于 2025-05-06 14:15:06 发布

Z_DZ

最新推荐文章于 2025-05-06 14:15:06 发布

阅读量3.6k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： css 文章标签： clear:left clear:right

本文链接：https://blog.youkuaiyun.com/qq_38006520/article/details/81007972

css 专栏收录该内容

4 篇文章

订阅专栏

因为复习布局嘛，用到了float属性，有时候希望让元素强制换行，就得用到clear属性。

但是，让我懵逼的是，clear-left和clear-right和clear-both属性到底怎么用的啊，看了一些资料更懵逼了！

所以决定做个小实验，看看怎么玩儿的。

第一种，初始状态

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../resource/css/learn_float_css_1.css" />
	</head>
	<body>
		<div class="bigBox">
			<div class="smallBox">
				框1
			</div>
			<div class="smallBox">
				框2
			</div>
			<div class="smallBox">
				框3
			</div>
			<div class="smallBox4">
				框4
			</div>
		</div>
	</body>
</html>

css

div.bigBox{
	margin: 0 auto;
	width: 800px;
	height: 500px;
	border: 2px solid #ccc;
}
div.smallBox{
	width: 100px;
	height: 100px;
	border: 1px solid deepskyblue;
	float: left;
}
div.smallBox4{
	width: 100px;
	height: 100px;
	border: 1px solid deepskyblue;
	float: left;
}

实现

第二种，把框4的设置为clear:left

html

			<div class="smallBox4" style="clear: left;">
				框4
			</div>

实现

这时候我们发现，把框4设置为clear:left后，框4另起一行了。我原来理解是，clear:left会让框4的float:left在第一行失效，然后跑到第二行继续生效。其实这种理解是错误的，我们接下来继续实验吧。

第三种，初始状态，我们在第一种的基础上，把框4设置为float:right,其余的框还是float:left

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../resource/css/learn_float_css_1.css" />
	</head>
	<body>
		<div class="bigBox">
			<div class="smallBox">
				框1
			</div>
			<div class="smallBox">
				框2
			</div>
			<div class="smallBox">
				框3
			</div>
			<div class="smallBox4">
				框4
			</div>
		</div>
	</body>
</html>

css

div.bigBox{
	margin: 0 auto;
	width: 800px;
	height: 500px;
	border: 2px solid #ccc;
}
div.smallBox{
	width: 100px;
	height: 100px;
	border: 1px solid deepskyblue;
	float: left;
}
div.smallBox4{
	width: 100px;
	height: 100px;
	border: 1px solid deepskyblue;
	float: right;
}

实现

第四种，现在我想让框4去第二行。按照我原来的理解，当前框4的属性设为clear:right，去除它这个飘到右边的效果，我们将框4设置为clear:right

html

			<div class="smallBox4" style="clear: right;">
				框4
			</div>

实现

很遗憾，我们发现框4没有下来，说明一开始我的理解不对，现在我们改变一下想法。

第五种，我们将框4的clear:right改为clear:left

html

			<div class="smallBox4" style="clear: left;">
				框4
			</div>

实现

最终我们发现，框4下来了！！！

所以最终得出结论：

clear:left的含义是如果当前元素的左侧有浮动元素，那么就强制该元素另起一行。

同理

clear:right的含义是如果当前元素的右侧有浮动元素，那么就强制该元素另起一行。