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. 基于SpringBoot+WebSocket搭建一个简单的多人聊天系统

    前言   今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么   首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工 ...

  2. 编译安装msyql

    环境: ubuntu18.04.2 mysql5.7.21 #创建mysql属组 groupadd mysql useradd -g mysql mysql #查看属组 tail /etc/passw ...

  3. Window下的VScode快捷键

    转载自4ark 全局 Ctrl + Shift + P, F1 显示命令面板 Ctrl + P 快速打开Ctrl + Shift + N 打开新窗口Ctrl + Shift + W 关闭窗口 基本 C ...

  4. 深入理解Netty框架

    前言 本文讨论的主题是Netty框架,本着3W原则 (What 是什么?->Why 为什么?->How 如何做?)来一步步探究Netty原理和本质以及运用场景. 了解基本名词 1.BIO. ...

  5. surging 微服务引擎 -协议主机的Behavior特性

    1.前言 因为工作的关系,最近很少更新surging,因为surging 一直处在不温不火的状态,而自己每天利用业余时间进行完善,每天都是疲惫的状态,还要应付新手的提问,曾经一度想放弃,但是有些人劝说 ...

  6. Numpy中的一点小知识

    train_set_x_orig, train_set_y, test_set_x_orig, test_set_y, classes = load_dataset()train_set_x_orig ...

  7. 重大升级！SEER见证人，您的节点需要在10月28日前更新

    SEER的区块链底层目前还处于不断完善中.一些新的完善更新会为区块链的基础设施--节点软件添加新的功能.理事会将会就是否接受新的节点版本进行共识投票,如果提案投票通过,将要求所有见证人在指定时间前将节 ...

  8. Java学习笔记之封装与继承

    封装 1,将属性定义为私有的(private)   不能通过  对象名.属性  来直接访问,但是可以通过方法来间接的访问, 2,封装的意义:公有属性可以被随意修改,并且不能被程序察觉.封装后,别人通过 ...

  9. 修改配置文件application.properties

    附录A.常用应用程序属性 可以在application.properties文件内部application.yml,文件内部或命令行开关中指定各种属性.本附录提供了常见Spring Boot属性的列表 ...

  10. 【websocket】spring boot 集成 websocket 的四种方式

    集成 websocket 的四种方案 1. 原生注解 pom.xml <dependency> <groupId>org.springframework.boot</gr ...