CSS--CSS清除浮动的4种方式
程序员文章站
2024-01-27 22:34:52
...
1. 添加一个子元素，并对其添加样式clear: both;
先写一个父div类名为parent，其中包含两个子div，类名分别为child1和child2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.parent {
background-color:lightblue;
}
.child1 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.child2 {
width: 100px;
height: 100px;
background-color:lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>
页面显示如图：
接下来给两个子模块添加样式float: left;使其浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.parent {
background-color:lightblue;
}
.child1 {
width: 100px;
height: 100px;
background-color: lightcoral;
float: left;
}
.child2 {
width: 100px;
height: 100px;
background-color:lightgreen;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>
如下图所示，父模块没有被撑开，高度为0，所以背景没有显示出来。
此时我们在父div下面再添加一个类名为clear的子div，并添加clear: both;样式，清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.parent {
background-color:lightblue;
}
.child1 {
width: 100px;
height: 100px;
background-color: lightcoral;
float: left;
}
.child2 {
width: 100px;
height: 100px;
background-color:lightgreen;
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
<div class="clear"></div>
</div>
</body>
</html>
如图，高度又重新被撑开了
2. 父元素样式overflow: hidden;
在父元素中添加overflow: hidden;样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.parent {
background-color:lightblue;
overflow: hidden;
}
.child1 {
width: 100px;
height: 100px;
background-color: lightcoral;
float: left;
}
.child2 {
width: 100px;
height: 100px;
background-color:lightgreen;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>
如图，父元素高度被撑开。
3. 使用伪类::after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.parent {
background-color:lightblue;
}
.parent::after {
clear: both;
content: '';
display: block;
height: 0;
}
.child1 {
width: 100px;
height: 100px;
background-color: lightcoral;
float: left;
}
.child2 {
width: 100px;
height: 100px;
background-color:lightgreen;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>
4. 让父元素一起浮动
父元素未设置宽高时，让父元素一起浮动的话，会使父元素的宽高都被子元素撑开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.parent {
background-color:lightblue;
float: left;
}
.child1 {
width: 100px;
height: 100px;
background-color: lightcoral;
float: left;
}
.child2 {
width: 100px;
height: 100px;
background-color:lightgreen;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>
上一篇： 前端打包项目如何本地预览？