<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>通过float进行布局</title>
<style type="text/css">
#left1
{
width: 200px;
height: 100px;
float: left;
background: blue;
}
#center
{
margin-right: 200px;
margin-left: 200px;
background: red;
height: 100px;
}
#right1
{
width: 200px;
height: 100px;
float: right;
background: blue;
}
</style>
</head>
<body>
<!--让浮动的div,left1和right1在不浮动的center上面,这样下面的center才会和浮动的div在同一行。如果清除center的float,
则就会和float的div不在同一行。由于float只能影响后面的div,所以如果center在前面的话,下面div 的float将另起一行。
-->
<div id="left1">
</div>
<div id="right1">
</div>
<div id="center">
</div>
</body>
</html>
转载于:https://www.cnblogs.com/520yang/articles/4387733.html