标签：utf-8 code img nbsp span border html ie6 blog
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px; border:1px solid black; } .left{ float: left; background: red; } .right{ float: right; background: blue; } </style> </head> <body> <div class="box"> <div class="left"> <h2>左边</h2> </div> <div class="right"> <h2>右边</h2> </div> </div> </body> </html>
box不能包住left和right
通过给box添加伪类解决上述问题
.box:after{
content: ‘‘;
display: block;
clear: both;
}
给h2元素加上高height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px; border:1px solid black; } .box:after{ content: ‘‘; display: block; clear: both; } .left{ float: left; background: red; } .right{ float: right; background: blue; } h2{ height: 30px; margin: 0px; } </style> </head> <body> <div class="box"> <div class="left"> <h2>左边</h2> </div> <div class="right"> <h2>右边</h2> </div> </div> </body> </html>
在IE6下（其他浏览器正常），h2属于块级元素，默认占一行
只需要给h2加上float属性就可解决上述问题。
float: left;
问题2：在IE6下，left和right直接会有缝隙，代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 500px; } .left{ width: 200px; height: 200px; float: left; background: red; } .right{ width: 200px; height: 200px; background: blue; margin-left: 200px; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
IE6显示效果 其他浏览器效果
解决方法：不建议这么做，或者全部用浮动。right去掉margin，加上float：left。
标签：utf-8 code img nbsp span border html ie6 blog
原文地址：http://www.cnblogs.com/halai/p/6845504.html
