容器与浮动子--双飞布局
默认块级元素，默认宽度100%，高度自适用，默认背景色无色
默认块级元素的浮动子元素，形成蛇形流浮动----margin-left属性的使用，会按照蛇形移动
浮动元素会丢失块级别默认特性，比如宽度100%，可以显式设置100%，使其具备浮动块级特性
浮动子元素内容会自动冲开父高度
通过浮动子元素设置：
margin-bottom:-9999px;
padding-bottom:9999px;
父亲元素：设置over-flow:hidden,实现自动
<html>
<head>
<style>
*{
padding: 0px;
margin: 0px;
}
body{
}
.page{
width:950px;
height: 1000px;
margin: 0px auto;
"> }
.head{
"> }
.body{
/* padding-left: 200px;
padding-right: 250px; */
overflow: hidden;
}
.leftcol{
float:left;
width: 200px;
margin-left: -100%;
/* position: relative;
left:-200px; */
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.rightcol{
float: right;
width: 250px;
height: 100px;
margin-left: -100%;
/* position: relative;
right:-250px; */
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.middle{
float:left;
width: 100%;
}
.inner{
margin-left:200px;
margin-right:250px;
}
.foot{
height: 100px;
*/
}
/* 块级元素的特点，自动占据%空间，当非块级别时，宽度适应内容 */
</style>
</head>
<body>
<div class="page">
<div class="head">
<h3>测试网站</h3>
<p>色风骚的风俗的风俗的风俗的峰的诉讼的风俗的峰</p>
</div>
<div class="body">
<div class="middle">
<div class="inner">
middle
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
</div>
</div>
<div class="leftcol"><p>leftdddddddd</p></div>
<div class="rightcol"><p>rightdddddddd</p></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
