CSS浮动原理

基本布局

<div id="header">header</div>
<div id="nav">nav</div>
<div id="sidebar">sidebar</div>
<div id="news">news</div>
<div id="about">about</div>
<div id="estate">estate</div>
<div id="footer">footer</div><pre name="code" class="html">样式

/* CSS Document */
*{
	margin:0;
	padding:0;
	}
body{
	background:lightyellow;
	width:875px; /*限制区块再居中*/
	margin:0 auto;
	}
#header{
	width:875px;
	height:323px;
	border:solid black;
	}
#nav{
	width:875px;
	height:323;
	background:red;
	}
#sidebar{
	width:251px;
	height:490px;
	background:#036;
	
	}
#news{
	width:313px;
	height:300px;
	background:#F36;
	}	
		
#about{
	width:303px;
	height:300px;
	background:#000;
	}
#estate{
	width:616px;
	height:190px;
	background:#096;
	}
#footer{
	
	height:110px;
	background:#C33;
	
	}		
	
		

布局颜色大概如上

1，现在给sidebar加上float：left左浮动。

   

设置后中间变成如上的效果，之所以那样，原来sidebar是div是块级元素，是占据一行的，，设置为左浮动后，，相当于sidebar浮动起来（可以理解为漂浮起来不在原来的布局面板上，在平面上已经不占据空间了），后面的news div就会往上面挤占据空间，news div的内容被挤压到右边，，

2.给news div设置左浮动后如图

  因为news设置为左浮动，此时和sidebar在同一水平面（即在浮动层），所以news显示在sidebar）右边，，背景为黑色的about div 由于news div浮动起来，所以占据了原理sidebar 和news 的空间，，在后面看不到，，

3.给about div 设置左浮动后

同理，about div 浮动后和news sidebar在同一层，所以在占据news 和sidebar以为的空间，，而estate和footer占据原来的空间

同理estate div 设置左浮动后占据news ，about，sidebar（浮动层的）空余空间。 footer占据平面层的空间

最后foot设置clear:both，清楚左右浮动，，这样footer就不会占据平面层的空间，不会去挤压