我的css排版实践
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>float_clear.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body {text-align: center;}
div {border: 1px solid black}
.topdiv {width: 960px;margin: 0 auto}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
</style>
</head>
<body>
<span>居中显示"margin: 0 auto"即可,ie则需要在body上加上text-align:center</span>
<div class="topdiv" >
<div>正确的方法
<div style="float: none;">top</div>
<div style="float: left;">left</div>
<div style="float: left;width: 90%">center</div>
<div style="float: none;">right</div>
<div style="float: none;">bottom</div>
</div>
<div>正确的方法
<div style="float: none;">top</div>
<div style="float: left;;width: 8%">left</div>
<div style="float: left;width: 82%">center</div>
<div style="float: none;">right</div>
<div style="float: none;">bottom</div>
</div>
<div>错误的方法，且浏览器表现不同,right的边框为红色
<div style="float: none;">top</div>
<div style="float: left;width: 2%">left</div>
<div style="float: left;width: 90%">center</div>
<div style="float: none;width: 8%;border-color: red">right</div>
<div style="float: none;">bottom</div>
</div>
<div style="">浮动撑出
<div style="float: none;">top</div>
<div style="float: left">left</div>
<div style="float: left;width: 980px">center</div>
<span class="clearfix">使用clear无效</span>
<div style="float: none;">right</div>
<div style="float: none;">bottom</div>
</div>
<div style="float: left;">浮动撑出,解决方法--父元素设置float
<div style="float: none;">top</div>
<div style="float: left">left</div>
<div style="float: left;width: 980px">center</div>
<div style="float: none;">right</div>
<div style="float: none;">bottom</div>
</div>
<div >我觉得最好的
<div style="float: none;">top</div>
<div style="float: left;">
一行的使用一个div包含，这样可以做到下面不超出
<div style="float: left">left</div>
<div style="float: left;width: 90%">center<br/>
宽度一般排版的时候会知道，不应该超出,所以最好分配宽度 <br/>
122222222222222222222222222222222222222222222222
122222222222222222222222222222222222222222222222
1222222222 22222222222222222222222222222222222222
1222222222222222222222 22222222222222222222222222
1222222222222222 22222222222222222222222222222222
122222222222222222222 222222222222222222222222222
122222222222222222222222222222222222222222222222
1222222222 22222222222222222222 222222222222222222
122222222222222222222222222222222222222222222222
122222222222 222222222222222222222222222222222222
12222222222222222222222 2222222222222222222222222
122222222222222222222222222222222222222222222222
122222222222222222222222222222222222222222222222
1222222222222222 22222222222222222222222222222222
122222222222222222222222222222222222222222222222
</div>
<div style="float: left;">right</div>
</div>
<div style="float: none;">换行的话使用float: none;bottom</div>
</div>
</div>
</body>
</html>
