逆战班：CSS清除浮动的方法：clear

最新推荐文章于 2022-10-27 19:13:15 发布

久伴丶帅

最新推荐文章于 2022-10-27 19:13:15 发布

阅读量140

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45981912/article/details/104445352

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当父元素没有设置宽度和高度时，其高度会随着里面的子元素的内容自适应，宽度为浏览器的宽度。而当其所有子元素设置浮动属性时，子元素会全部在同一行显示，直到浏览器的边缘才会换行。这时如果其中一个子元素开始，之后的子元素全部换行时，有两种方法：

为了方便理解，我们通过实现计算器数字界面来演示

1、给父元素设置宽度

给父元素加了宽度之后，当子元素遇到父元素的宽度边缘时，自动换行。不过这个方法会比较麻烦，我们需要设置数个不同行的父元素。
在此就不演示了

2、给子元素添加清除浮动属性clear

html文件的代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<div class="div1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li class="clear">4</li>
				<li>5</li>
				<li>6</li>
				<li class="clear">7</li>
				<li>8</li>
				<li>9</li>
				<li class="clear">0</li>					
			</ul>
		</div>
	</body>
</html>

CSS中的代码如下：

li{
	float: left;
	list-style: none;
	width: 50px;
	height: 50px;
	background: #ccc;
	margin: 20px;
	text-align: center;
	line-height: 50px;
}

这时浏览器中的效果为：
在这里插入图片描述
如果我们想要4 7 0和其之后的子元素分别换行时，可以给4 7 0的li标签添加cclear:both;属性

.clear{
	clear: both;
}

此时浏览器的效果：
在这里插入图片描述
总结：如果所有的子元素都设置了浮动，如果想要让其中某一个子元素和其后面的子元素全部换行时，就给那一个子元素添加clear属性

注：清除浮动不是不让他浮动，而是清除元素float浮动之后的不利影响

久伴丶帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
逆战班：CSS清除浮动的方法：clear

当父元素没有设置宽度和高度时，其高度会随着里面的子元素的内容自适应，宽度为浏览器的宽度。而当其所有子元素设置浮动属性时，子元素会全部在同一行显示，直到浏览器的边缘才会换行。这时如果其中一个子元素开始，之后的子元素全部换行时，有两种方法：为了方便理解，我们通过实现计算器数字界面来演示1、给父元素设置宽度给父元素加了宽度之后，当子元素遇到父元素的宽度边缘时，自动换行。不过这个方法会比较麻烦，我们...
复制链接

扫一扫