浮动元素引起的问题:
当容器的高度为auto(没设置),容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="1.jpg"/>
<p>some text</p>
</div>
</body>
</html>
解决方法一:额外标签法,<div style="clear:both;"></div>,<br style="clear:both;"/>,<hr style="clear:both;"/>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="1.jpg"/>
<p>some text</p>
<div style="clear:both;"></div>
</div>
</body>
</html>
方法二:用after伪元素(推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news::after{ /*添加了一个看不见的空格"020"或点"."*/
content: "020"; /*content:".";*/
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="1.jpg"/>
<p>some text</p>
</div>
</body>
</html>
方法三:父元素添加overflow:hidden;或overflow:auto;(这种方法可行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.news {
background-color: gray;
border: solid 1px black;
overflow:auto;/*hidden*/
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="1.jpg"/>
<p>some text</p>
</div>
</body>
</html>
方法四:父元素添加float属性。但是这样会使其整体浮动,影响布局,不推荐使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="1.jpg"/>
<p>some text</p>
</div>
</body>
</html>
总共两种思路:
1.方法一和二都是利用clear属性,禁止左/右侧存在浮动元素。
2.方法三和四,对父元素处理,使之变成BFC。