什么是CSS清除浮动？
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
有一段代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让包围元素在视觉上包含浮动元素</title>
<style>
.news{
background: gray;
border:1px solid black;
}
.new img{
float: left;
}
.news p{
float: right;
}
</style>
</head>
<body>
<p>通过css增加内容，然后清理，display设置为block，height为0，visibility设置为hidden</p>
<div class="news">
<img src="logo.bmp" alt="my image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptatum quisquam incidunt eligendi commodi, provident sit reiciendis maxime corporis sunt doloremque mollitia magnam eum totam? Nihil totam, voluptas cum nesciunt.</p>
</div>
</body>
</html>
在上面这段代码中。因为图片和文本都被浮动，脱离了文档流，所以包围图片和文本的div不占据空间，如果我们不做什么改变的话，包围元素div是无法包含浮动元素的。所以下面介绍四种方法来清除浮动，实现包围元素包含浮动元素的效果。
1 添加一个空元素然后清理它
在这里，我们通过在div中添加一个空元素，即br，然后清理它，当然也可以使用div、hr等元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让包围元素在视觉上包含浮动元素</title>
<style>
.news{
border:1px solid black;
background-color: gray;
}
.news p{
float: right;
width: 500px;
padding:20px;
}
.news img{
float: left;
}
.both{
clear: both;
}
</style>
</head>
<body>
<p>增加额外元素，进行清理</p>
<div class="news">
<img src="logo.bmp" alt="my image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit sunt
officia exercitationem ullam dolores possimus vitae laborum dolor amet
harum, dicta expedita nam rerum vel quas, voluptatem deserunt labore dignissimo
</p>
<br class="both"/>
</div>
</body>
</html>
2 浮动容器
此处原本div是不浮动的，我们给div加入float:left，让其浮动起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让包围元素在视觉上包含浮动元素</title>
<style>
.news{
border:1px solid black;
background-color: gray;
float: left;
}
.news p{
float: right;
width: 500px;
padding:20px;
}
.news img{
float: left;
}
</style>
</head>
<body>
<p>将容器进行浮动</p>
<div class="news">
<img src="logo.bmp" alt="my image">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum aliquid sequi eius. Cum nesciunt quae velit placeat, autem nulla doloremque. Ipsa nostrum voluptatibus libero fugiat vero! Sequi officiis, molestias minus!
</p>
</div>
</body>
</html>
3.设置容器的overflow属性值为auto或hidden
当一个容器的overflow属性值为auto或hidden时，会有一个副作用——清理包含的所有浮动元素。
在这里，我们将div的overflow属性值设置为auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让包围元素在视觉上包含浮动元素</title>
<style>
.news{
border:1px solid black;
background-color: gray;
overflow: auto;
}
.news p{
float: right;
width: 500px;
padding:20px;
}
.news img{
float: left;
}
</style>
</head>
<body>
<p>容器设置overflow的属性值为auto或者为hidden</p>
<div class="news">
<img src="logo.bmp" alt="my image">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum aliquid sequi eius. Cum nesciunt quae velit placeat, autem nulla doloremque. Ipsa nostrum voluptatibus libero fugiat vero! Sequi officiis, molestias minus!
</p>
</div>
</body>
</html>
4 利用伪类after添加内容并清理
添加一个”.“,并将清理，设置display为block，visibility为hidden，height为0才不会影响布局，显示出来。
需要注意的是为了IE6和IE7浏览器，要给clear这个class添加一条zoom:1;触发haslayout。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让包围元素在视觉上包含浮动元素</title>
<style>
.news{
background: gray;
border:1px solid black;
}
.new img{
float: left;
}
.news p{
float: right;
}
.clear:after{
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clear {
/* 触发 hasLayout */
zoom: 1;
}
</style>
</head>
<body>
<p>通过css增加内容，然后清理，display设置为block，height为0，visibility设置为hidden</p>
<div class="news clear">
<img src="logo.bmp" alt="my image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptatum quisquam incidunt eligendi commodi, provident sit reiciendis maxime corporis sunt doloremque mollitia magnam eum totam? Nihil totam, voluptas cum nesciunt.</p>
</div>
</body>
</html>
推荐：
使用伪类after来清理浮动，达到包围元素包含浮动元素的效果。添加空元素虽然简单，但是需要添加没必要的元素，overflow可能会带来无法预料的后果，例如出现滚动条或者截断内容，float父容器也是如此。而伪类after，通过CSS代码添加内容，通过属性设置不会影响布局，并兼容各大浏览器，所以建议采用。
时间： 2024-08-10 00:06:16