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. 解决使用MUI时mui-slider-item高度不一致的自适应问题

    今天在写一个MUI项目的时候,发现使用slider时,最高的mui-slider-item会把mui-slider-group撑开,而其他的mui-slider-item下面会出现很大的空白. 百度了 ...

  2. Docker Registry 管理镜像

    一.使用Docker Registry管理镜像 a.登陆docker hub  https://www.docker.com/products/docker-hub b.创建仓库 c.推送镜像   打 ...

  3. Kafka 学习笔记之 Kafka0.11之producer/consumer（Scala）

    Kafka0.11之producer/consumer(Scala): KafkaConsumer: import java.util.Properties import org.apache.kaf ...

  4. MongoDB 学习笔记之 地理空间索引入门

    地理空间索引: 地理空间索引,可用于处理基于地理位置的查询. Point:用于指定所在的具体位置,我们以restaurants为例: db.restaurants.insert({name: &quo ...

  5. 写了那么多年 Java 代码，终于 debug 到 JVM 了

    继上篇文章 原创 | 全网最新最简单的 openjdk13 代码编译 之后,我们有了自己编译后的 jdk 和 hotspot,如下图所示.接下来就来干一番事情. 搭建调试环境 1.下载 CLion 软 ...

  6. 【SQL】sql查询同一字段相同属性列的值合计

    select  type,sum(value) as valueSum from t group by type

  7. k8s pod访问不通外网问题排查

    环境概况 自建k8s集群,主机操作系统ubuntu16.04,k8s版本v1.14, 集群网络方案calico-3.3.6. worker节点数50+,均为GPU物理服务器,服务器类型异构,如Nvid ...

  8. 引入外部js

    引入外部js应该使用完整标签<script></script>,而使用单标签<script src=“”/>是错误的

  9. SpringCloud教程一:eureka注册中心(Finchley版)

    一.spring cloud简介 本阶段学习教程Spring Boot版本2.0.3.RELEASE,Spring Cloud版本为Finchley.RELEASE. Finchley版本的官方文档如 ...

  10. Javascript之傻傻理不清的原型链、prototype、__proto__

    新人学习Javascript,其中的原型链一直是云里雾里,不得要领,查了很多相关资料,觉得这遍讲得最为清晰易懂,特转载分享,共同学习. 1. JavaScript内置对象 所谓的内置对象 指的是:Ja ...