使用float设置经典的网站前端结构
float浮动是能使得标签脱离文档流，此处脱离文档流，是指此便签后面的，没有脱离文档流的标签将此标签当作透明，按正常来布局。
float脱离文档流，是受到父级范围限制的，在父级范围内脱离文档流，脱离文档流后的标签显示位置，受父级的宽度影响，除非父级的宽度设置为固定。
*在同一个父级当中，第一个标签元素是不会被后边设置了float的标签掩盖，不论它有没有设置float
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| #divE { | |
| width: 1270px; | |
| background: chartreuse; | |
| } | |
| #head { | |
| width: 1240px; | |
| height: 150px; | |
| background: coral; | |
| } | |
| #B { | |
| width: 200px; | |
| height: 600px; | |
| background: darksalmon; | |
| float: left; | |
| margin: 15px; | |
| } | |
| #A { | |
| width: 700px; | |
| height: 1200px; | |
| background: yellowgreen; | |
| float: left; | |
| margin: 10px; | |
| } | |
| #C { | |
| width: 300px; | |
| height: 600px; | |
| background: hotpink; | |
| float: left; | |
| margin: 10px; | |
| } | |
| #footer { | |
| width: 1240px; | |
| height: 150px; | |
| clear: both; | |
| background: darkturquoise; | |
| } | |
| #leftContent { | |
| width: 50px; | |
| height: 50px; | |
| background: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <center> | |
| <div id="divE"><!--divE没有float，所以divE还在文档流当中，他的高度，是受到他的那些还在文档流的子元素的影响--> | |
| <div id="head"> | |
| </div> | |
| <!--没有设置float还在文档流当中，所以他能影响divE的高--> | |
| <!--因为DivBAC有divE包裹着，而且E的宽度是定的，所以他们在浏览缩放时不会自己跑，应为DivE的宽度没有改变--> | |
| <!--如果DivE的宽度不设定，默认是auto，那么DivE的宽度会随浏览器缩放变化而变化，那么DivABC也会受影响，自己飘--> | |
| <div id="B"> | |
| <div id="leftContent"></div> | |
| <ul > | |
| <li>首页</li> | |
| <li>登录</li> | |
| <li>消息</li> | |
| </ul> | |
| </div> | |
| <!--divABC设置了float，不在文档流当中，所以就不影响divE的高--> | |
| <div id="A"></div> | |
| <div id="C"></div> | |
| <div id="footer"></div> | |
| <!--footer不设置float和position的情况下，footer是遵从文件流的 | |
| ，由于divABC已经设置了float了，脱离了文件路，footer还在文件流中，那么就是排到了head的下面，与head共同的决定divE的高度-> | |
| <!--如果footer的clear设置成both，那么footer一厢情愿的就把DivABC认为还在流当中，让后自己排到DivABC下方了--> | |
| </div> | |
| </center> | |
| </body> | |
| </html> |
