清除浮动方式

最新推荐文章于 2025-03-24 10:28:16 发布

原创最新推荐文章于 2025-03-24 10:28:16 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

博客主要讨论网页高度问题，当父元素不设高度时，标准流内容高度为父元素高度，浮动流则不然。当div内容为浮动流时无法分行，需清除浮动，介绍了两种清除方式，一是为首个标签设高度，不常用；二是用clear属性，有四个取值，但使用后margin属性失效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页高度问题：

1、当父元素不设置高度时，标准流中内容高度为父元素的高度；

2、但是若为浮动流，浮动流的高度不为父元素的高度。

当div中的内容均为浮动流时，无法实现分行的功能，需要清除浮动。

清除浮动方式一：

为第一个标签设置高度。

但是这种方式并不常用，所以一般情况下不会使用。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
	margin: 0;
	padding: 0;
}
.c1 {
	background-color: yellow;
	height: 20px;
}
.c2 {
	background-color: blue;
}
.c1 p {
	background-color: pink;
	width: 100px;
	float: left;
}
.c2 p {
	background-color: dodgerblue;
	width: 100px;
	float: left;
}
</style>
</head>
<body>
<div class="c1">
  <p>aaaa</p>
  <p>bbbb</p>
  <p>cccc</p>
  <p>dddd</p>
</div>
<div class="c2">
  <p>aaaa</p>
  <p>bbbb</p>
  <p>cccc</p>
  <p>dddd</p>
</div>
</body>
</html>

清除浮动方式二：

使用clear属性来清除浮动。

clear共有四个取值：

none:不进行清除；

left:让浮动元素不去寻找前面左浮动的元素；

right:让浮动元素不去寻找前面右浮动的元素；

both:让浮动元素不去寻找前面浮动的元素；

但是当标签使用clear属性之后，margin属性变不会起作用。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
	margin: 0;
	padding: 0;
}
.c1 {
	background-color: yellow;
}
.c2 {
	background-color: blue;
	clear: left;
}
.c1 p {
	background-color: pink;
	width: 100px;
	float: left;
}
.c2 p {
	background-color: dodgerblue;
	width: 100px;
	float: left;
}
</style>
</head>
<body>
<div class="c1">
  <p>aaaa</p>
  <p>bbbb</p>
  <p>cccc</p>
  <p>dddd</p>
</div>
<div class="c2">
  <p>aaaa</p>
  <p>bbbb</p>
  <p>cccc</p>
  <p>dddd</p>
</div>
</body>
</html>