使用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>

posted on 2017-08-27 22:48  耀礼士多德  阅读(325)  评论(0)    收藏  举报