当元素浮动时,他就不再占用文档流中的任何空间了,因此,父列表实际上什么东西都没有,他就会收缩,从而隐藏列表的背景,解决这个问题的方法有以下集几种:
方法一:添加一个清理的元素,但是会在页面上添加不必要的元素,所以不建议使用这种办法;
方法二:让父元素浮动,并且使用某个元素(比如站点页脚)对它进行清理,以便换行;
方法三:也就是我们使用最多的方法,采用 overflow:hidden;技术;
方法四:利用相邻元素进行清除浮动;
方法五:使用::after伪元素,content:” “空元素进行清除浮动;
下面让我们通过示例代码来看看:
法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与清除</title>
<style type="text/css">
.news{
background-color: gray;
border: solid 1px black;
width: 500px;
}
.news img{
float: left;
}
.news p{
float: right;
}
.clear{
clear: both;
} /*方法一*/
</style>
</head>
<body>
<div class="news">
<img src="Apple_1.png" alt="apple">
<p>Some text</p>
<br class="clear"> /*方法一*/
</div>
</body>
</html>
方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与清除</title>
<style type="text/css">
.news{
background-color: gray;
border: solid 1px black;
width: 500px;
float: left; /*方法二*/
}
.news img{
float: left;
}
.news p{
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="Apple_1.png" alt="apple">
<p>Some text</p>
<br class="clear" style="clear:both;"> /*方法二*/
</div>
</body>
</html>
方法三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与清除</title>
<style type="text/css">
.news{
background-color: gray;
border: solid 1px black;
width: 500px;
overflow: hidden; /*方法三*/
}
.news img{
float: left;
}
.news p{
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="Apple_1.png" alt="apple">
<p>Some text</p>
</div>
</body>
</html>
效果如下:
方法四:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用相邻元素进行清除浮动</title>
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;
}
</style>
</head>
<body>
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>
</body>
</html>
方法五:
清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用::after伪元素清除浮动</title>
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: " ";
display: block;
clear: both;
visibility: hidden; /*使该元素不可见*/
}
</style>
</head>
<body>
<div class="news clearfix"> <!-- .news 和 .clearfix是一样的类选择器 -->
<img src="news-pic.jpg" />
<p>some text</p>
</div>
</body>
</html>