CSS基础之清除浮动
本人前端菜鸟一枚，在学习 CSS 过程中发现网上流传的教程参差不齐，要么内容不够详细，要么方法就是错的。本文是在我参考了许多前辈经验的基础上编写的，如有错误的地方，请各位大牛不吝赐教。以下是我总结的三种行之有效而且比较简单实用的方法。
一、父级div定义伪类 :after
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础之清除浮动</title>
<style>
*{
margin:0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #3ac;
}
.father{
margin: 10px auto;
}
.float_left{
float: left;
background: #a3f;
width: 70%;
height: 450px;
}
.float_right{
float: right;
background: #f3f;
width: 30%;
height: 300px;
}
.father:after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div id="header">头部</div>
<div class="father">
<div class="float_left">left</div>
<div class="float_right">right</div>
</div>
<div id="footer">底部</div>
</body>
</html>
其中关键的部分为：
.father:after{
display: block;
content: "";
clear: both;
}
这里 content 的值尽量写为空或者不写，如果写其他值，则需添加多余的代码，举例如下：
.father:after{
display: block;
height: 0;
visibility: hidden;
content: "清除浮动";
clear: both;
}
虽然也能清除浮动，但多了一些不必要的代码。
二、在结尾处添加空的div标签
原理跟使用 :after 伪类一样，都是通过 clear: both; 来实现的。示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础之清除浮动</title>
<style>
*{
margin:0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #3ac;
}
.father{
margin: 10px auto;
}
.float_left{
float: left;
background: #a3f;
width: 70%;
height: 450px;
}
.float_right{
float: right;
background: #f3f;
width: 30%;
height: 300px;
}
.clr{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div id="header">头部</div>
<div class="father">
<div class="float_left">left</div>
<div class="float_right">right</div>
<div class="clr"></div>
</div>
<div id="footer">底部</div>
</body>
</html>
三、父元素定义 overflow：auto;
HTML结构跟上面一样，CSS样式部分如下：
*{
margin:0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #3ac;
}
.father{
margin: 10px auto;
overflow: auto;
}
.float_left{
float: left;
background: #a3f;
width: 70%;
height: 450px;
}
.float_right{
float: right;
background: #f3f;
width: 30%;
height: 300px;
}
这种方法使用起来很简单，但具有一定的局限性。内部宽高超过父级div时，会出现滚动条。
以上就是清除浮动的三种方法。另外如果父元素本身也是浮动的话，则父元素内就无需清除浮动。要根据实际情况选择可行的方法。
时间： 2024-11-08 13:14:20