标签：解决 blog 影响 nbsp 利用 img jpg 优雅 back
http://www.cnblogs.com/ForEvErNoME/p/3383539.html，记录学习
25.浮动元素引起的问题：
当容器的高度为auto（没设置），容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <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"> <title>index</title> <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">
<title>index</title>
<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"> <title>index</title> <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.方法三和四，对父元素处理。
标签：解决 blog 影响 nbsp 利用 img jpg 优雅 back
原文地址：http://www.cnblogs.com/shen076/p/6537461.html
