.top{height:100px;background:#999;}
.main{height:600px;background:red;position:relative;}
.right{height:600px;background:#6F9;margin-left:210px;}
.left{ width:200px;height:600px;background:blue;position:absolute;left:0;top:0;}
.foot{height:50px;background:#F60;clear:both;}
.main{height:600px;background:red;position:relative;}
.right{height:600px;background:#6F9;margin-left:210px;}
.left{ width:200px;height:600px;background:blue;position:absolute;left:0;top:0;}
.foot{height:50px;background:#F60;clear:both;}
文档流:将窗口自上而下分成一行一行,并在每行中按从左至右的依次排放元素,即为文档流。
有三种情况使得元素离开文档流而存在,分别是浮动 绝对布局 固定定位
有三种情况使得元素离开文档流而存在,分别是浮动 绝对布局 固定定位
top{height:100px;width:900px;background:gray;margin:0 auto;}
main{height:auto;width:900px;margin:0 auto;}
.left{height:300px;background:blue;float:left;width:150px;}
.right{height:300px;background:blue;float:right;width:730px;}
.foot{height:70px;background:pink;clear:both;margin:0 auto;width:900px;}
main{height:auto;width:900px;margin:0 auto;}
.left{height:300px;background:blue;float:left;width:150px;}
.right{height:300px;background:blue;float:right;width:730px;}
.foot{height:70px;background:pink;clear:both;margin:0 auto;width:900px;}