DIV的特点：
关于宽度：
1.要是DIV的宽没有设定，那么其宽度默认为auto，即会填满其父元素。
2.要是DIV的宽度设定了，那么其宽度不会受子元素或父元素影响。
.要是DIV的子元素宽度大于它自己的宽度，不管子元素有没有脱离文档流，子元素会在横向向右溢出。
关于高度：
1.要是DIV的高度没有设定，其高度受“没有脱离文档流”的子元素影响。以下是DIV宽度为0的情况：
  DIV没有子元素，那么其高度为0；
　DIV的所有子元素高度都为0，那么其高度为0；
　DIV的子元素都“脱离文档流”，那么其高度为0；
2.要是DIV的高度设定了，那么其高度不会受子元素或父元素影响。
3.要是DIV的子元素高度大于它自己的高度，不管子元素有没有脱离文档流，子元素会在向下溢出。


第一种情况：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #E {
            width: 500px;
            background: gold;
        }

        #head {
            width: 500px;
            height: 100px;
            background: aquamarine;
        }

        #B {
            width: 100px;
            height: 300px;
            background: dimgrey;
            float: left;

        }

        #A {
            width:300px;
            height: 600px;
            background: navajowhite;
            float: left;

        }

        #C {
            width:100px;
            height: 300px;
            background: crimson;
            float: left;

        }

        #footer {
            width: 500px;
            height: 100px;
            clear: both;
            background: aquamarine;
        }

    </style>
</head>
<body>
<center>
    <div id="head">head</div>
    <div id="E">
        <div id="B">B</div>
        <div id="A">A</div>
        <div id="C">C</div>
        <div id="footer">footer</div>
    </div>
</center>
</body>
</html>

（E是橙色的一块）

以下是逐个元素分析：

head：普通的DIV，没有设置float，在文档流中，在E的外面。

E：普通的DIV，没有设置float，在文档流中，按文档流的方式排序，由上到下，应该排到head后边；

ABC：在E里头，设置了float:left，不在文档流中，三个的with总和刚好等于E。此处，说明了，设置了float后，它们的左上角是不会超出E的范围的。

footer：在E里头，没有设置float，在文档流中，但是Clear设置了both，那就是说，footer忽略了ABC的影响，将ABC当成普通的DIV，然后按文档流，由上到下，排在A后面；

　　　　footer影响E的大小。

第二种情况：

基于第一种情况，

   <div id="E">
        <div id="B">B</div>
        <div id="A">A</div>
        <div id="C">C</div>
        <div id="footer">footer</div>//改变了这里
    </div>

    <div id="footer">footer</div><!--将footer放到E的外边-->

分析：

footer：在E的外边，没有设置float，在文档流中。footer没有在E中，那么就不会影响E的高度，由于ABC已经脱离了文档流，所以ABC不影响其大小，那么E就没有子元素影响其大小，所以大小为0。

第三种情况：

<div id="E">
<div id="head"></div>//改变了这里
<div id="B">B</div>
<div id="A">A</div>
<div id="C">C</div>
</div>
<div id="footer">footer</div>

(head的宽度改为490px，其他不变)

分析：

head：没有设置float，在“文件流”中，高度设定，所以决定了E的高度；

ABC：没有在文件流当中，不决定E的高度，但是，没有由于脱离文件流，而压盖在head上

以下几点是float的特性：

第四种情况：

#EE
{
    height: 100px;
    width: 600px;
    background: blue;
}
<div id="E">
    <div id="head"></div>
    <div id="B">B</div>
    <div id="A">A</div>
    <div id="C">C</div>
    <div id="EE"></div>//改变了这里
</div>
<div id="footer">footer</div>

(蓝色为EE)

head：没有设置float，在“文件流”中，高度设定，所以决定了E的高度；

ABC：没有在文件流当中，不决定E的高度，但是，没有由于脱离文件流，而压盖在head上

EE：没有设置float，在“文件流”中，高度设定，所以和head共同决定了E的高度，被ABC压盖。

第五种情况：

<div id="E">
<div id="head"></div>
<div id="B">B</div>
<div id="EE"></div>//将EE放到这里
<div id="A">A</div>
<div id="C">C</div>
</div>
<div id="footer">footer</div>

head：没有设置float，在“文件流”中，高度设定，所以决定了E的高度；

B：没有在文件流当中，不决定E的高度，但是，没有由于脱离文件流，而压盖在head上

EE：没有设置float，在"文档流"中，但是左侧受到B的影响向右溢出，与head共同决定E的高度

AC：设置了float，在“文档流”中，但是没有压盖EE。

第六种情况：

#EE
{
    height: 100px;
    width: 600px;
    background: blue;
    clear: both;//改了这里
}

head：没有设置float，在“文件流”中，高度设定，所以决定了E的高度；

B：没有在文件流当中，不决定E的高度，但是，没有由于脱离文件流，而压盖在head上

EE：没有设置float，在"文档流"中，与head共同决定E的高度， 使用Clear:Both后，将B当做文档流中，自上向下排在B后边。

AC：设置了float，不在“文档流”中，但是没有压盖EE。

自此：得出了float的基本特性：

1. 在同一父元素内，排列在后边的元素，不论有没有设置float，也不能压盖前面(不论有没有设置float)的元素上面。

2.在同一父元素内，排列在前面的元素，如果设置了float，能压盖排列在后边，没有设置float的元素，看第四种情况。

3.所谓清除浮动，是指将前面的元素当做在文档流中，没有设置float，他自身遵从自上向下排列，看第一种情况和第六种情况

重点：

设置布局，应该以第二种情况为佳：

根据语义，head有自己的内容，footer也有自己的内容，应该与E脱离关系，E只是为了让ABC布局而设置的容器，其本身并没有语义内容。

使用float设置经典的网站前端结构(深入探讨)的更多相关文章

  1. 使用float设置经典的网站前端结构

    float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...

  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. MySQL-时区导致的时间前后端不一致

    背景 今天早上刚上班,就被同事提示,程序的日期处理有问题.数据库里日期为:2019-05-21 11:00:00 而前端显示的日期为:2019-05-21 16:00:00 分析 那肯定是和时区相关了 ...

  2. 设计模式---结构型模式之适配器模式(Adapter Pattern)

    适配器模式定义 将一个类的接口,转换成客户期望的另外一个接口.适配器让原本接口不兼容的类可以合作无间. 适配器模式主要有两种类型:对象适配器和类适配器. 在详细解释这两种类型时,解释部分重要角色.生活 ...

  3. 可能是国内第一篇全面解读 Java 现状及趋势的文章

    作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! 导读:InfoQ 发布<2019 中国 Java 发展趋势报告>,反映 Java 在 ...

  4. rest_framework视图

    知识预览 视图 回到顶部 视图 使用混合(mixins) 上一节的视图部分:   from rest_framework.views import APIView from rest_framewor ...

  5. 06-01 DeepLearning-图像识别

    目录 深度学习-图像识别 一.人脸定位 二.手工提取特征的图像分类 2.1 识图认物 2.2 传统分类系统的特征提取 2.3 计算机眼中的图像 2.4 什么是图像特征? 2.5 卷积运算 2.6 利用 ...

  6. linux 防火墙基本使用

    写在最前面 由于工作后,使用的Linux就是centos7 所以,本文记录是是centos7的防火墙使用. 从 centos7 开始,系统使用 firewall 进行防火墙的默认管理工具. 基本使用 ...

  7. MySQL视图的优缺点以及如何创建视图

    视图,虚拟表,从一个表或多个表中导出来的表,作用和真实表一样,包含一系列带有行和列的数据 视图中,用户可以使用SELECT语句查询数据,也可以使用INSERT,UPDATE,DELETE修改记录,视图 ...

  8. C#调用RabbitMQ实现消息队列

    前言 我在刚接触使用中间件的时候,发现,中间件的使用并不是最难的,反而是中间件的下载,安装,配置才是最难的. 所以,这篇文章我们从头开始学习RabbitMq,真正的从头开始. 关于消息队列 其实消息队 ...

  9. 基于华为物联网IOT的应用开发 --- 基于.net 的SDK封装

    最近,物联网的概念比较热门,一大批厂商抢着占领物联网的高低,包括有华为物联网.阿里云物联网.腾讯物联网.AWS物联网等等,无法一一列举,一般物联网包含设备侧开发.平台侧开发.应用侧开发,三个部分构成了 ...

  10. .Net Core 3.0 IdentityServer4 快速入门

    .Net Core 3.0 IdentityServer4 快速入门 一.简介 IdentityServer4是用于ASP.NET Core的OpenID Connect和OAuth 2.0框架. 将 ...