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>

使用float设置经典的网站前端结构的更多相关文章

  1. 使用float设置经典的网站前端结构(深入探讨)

    .要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...

  2. 使用position设置经典的网站前端结构

    能脱离文档流的设置: float:left/right position:absolute; 绝对定位 position:fixed; 固定定位 //搞清楚position的属性值的意思就容易明白 使 ...

  3. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  4. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  5. 网站前端优化技术 BigPipe分块处理技术

    前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...

  6. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

  7. 为什么大型网站前端使用PHP后台逻辑用Java

    前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...

  8. [转]为什么大型网站前端使用 PHP 后台逻辑用 Java？

    最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...

  9. 通过浏览器F12开发工具快速获取别的网站前端代码的方法

    通过浏览器F12开发工具快速获取别的网站前端代码的方法 说明:直接另存为网页是比较老的做法,会有很多没用的东西下载下来.通过F12开发工具,sources获取到的是比较好的,有目录结构的源文件.

随机推荐

  1. 同时支持EF+Dapper的混合仓储，助你快速搭建数据访问层

    背景 17年开始,公司开始向DotNet Core转型,面对ORM工具的选型,当时围绕Dapper和EF发生了激烈的讨论.项目团队更加关注快速交付,他们主张使用EF这种能快速开发的ORM工具:而在线业 ...

  2. 洛谷:P3384 [HNOI2004]宠物收养场

    原题地址:https://www.luogu.org/problemnew/show/P3384 题目简述 给定一些序列(没有重复数字),每个序列支持: 给定一些数k(对于每个序列不重复),每次在序列 ...

  3. 快学Scala 第十六课 （shell调用，正则表达式，正则表达式组，stripMargin妙用）

    shell调用:(管道符前加#号,执行shell用!) import sys.process._ "ls -al" #| "grep x" ! 正则表达式:(r ...

  4. Django2.0入门：第一章、Django是啥

    Django介绍 缘起 随着Python语言的兴起,越来越多的程序员开始转向这门语言的学习.在我们学习完Python基础之后,就可以选择利用Python这门语言进行Web应用开发.而众多Python ...

  5. vodevs3031 最富有的人

    在你的面前有n堆金子,你只能取走其中的两堆,且总价值为这两堆金子的xor值,你想成为最富有的人,你就要有所选择. 输入描述 Input Description 第一行包含两个正整数n,表示有n堆金子. ...

  6. 本人亲测-SSM环境搭建（使用eclipse作为示例，过程挺全的，可作为参考）

    本人亲测-SSM环境搭建(使用eclipse作为示例,过程挺全的,可作为参考) 本人亲测-SSM环境搭建(使用eclipse作为示例,过程挺全的,可作为参考) 本人亲测-SSM环境搭建(使用eclip ...

  7. Java内存模型总结

    Java内存模型 内存模型可以理解为在特定的操作协议下,对特定的内存或者高速缓存进行读写访问的过程抽象,不同架构下的物理机拥有不一样的内存模型,Java虚拟机也有自己的内存模型,即Java内存模型(J ...

  8. webshell环境下信息收集备忘录

    重视信息收集.再次复习下基础且重要的命令,特别是wmic的使用 Whoami /all Ipconfig /all Route print tasklist /svc Query uer quser ...

  9. 爬虫4：pdf页面+pdfminer模块+demo

    本文介绍下pdf页面的爬取,需要借助pdfminer模块 demo一般流程: 1)设置url url = 'http://www.------' + '.PDF' 2)requests模块获取url ...

  10. PHP array_shift

    1.函数的作用:删除数组的头个元素并返回 2.函数的参数: @params array  &$array 3.需要注意的例子: <?php /** * http://php.net/ma ...