使用float设置经典的网站前端结构(深入探讨)
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设置经典的网站前端结构(深入探讨)的更多相关文章
- 使用float设置经典的网站前端结构
float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...
- 使用position设置经典的网站前端结构
能脱离文档流的设置: float:left/right position:absolute; 绝对定位 position:fixed; 固定定位 //搞清楚position的属性值的意思就容易明白 使 ...
- 移动平台3G手机网站前端开发布局技巧
本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...
- 移动平台3G手机网站前端开发布局技巧汇总
移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博 发布:2011-05-10 09:11 分类:移动开发 阅读:120,618 views 7条评论 您或许正在 ...
- 网站前端优化技术 BigPipe分块处理技术
前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- 为什么大型网站前端使用PHP后台逻辑用Java
前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...
- [转]为什么大型网站前端使用 PHP 后台逻辑用 Java？
最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...
- 通过浏览器F12开发工具快速获取别的网站前端代码的方法
通过浏览器F12开发工具快速获取别的网站前端代码的方法 说明:直接另存为网页是比较老的做法,会有很多没用的东西下载下来.通过F12开发工具,sources获取到的是比较好的,有目录结构的源文件.
随机推荐
- 阿里云虚拟主机安装wordpress，提示连接数据库失败的解决方法
很多新手在购买的虚拟主机后就开始尝试安装,却发现连接数据库老是出错,不知道什么问题,反复检查了自己填写的数据库连接信息发现也没有问题,这个时候我们似乎就没法了. 但这个其实是后台空间的设置问题,你 ...
- Nginx简单介绍以及linux下使用Nginx进行负载均衡的搭建
1.Nginx简介 Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,官方测试nginx能够支支撑5 ...
- SpringBoot系列：Spring Boot使用模板引擎FreeMarker
一.Java模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...
- 详解计算机中的Byte、bit、字、字长、字节
最近突然有同事问我,关于计算机中的计量单位大B和小b的区别,以及KB到GB之间的换算问题,我当时觉得这问题简单,大B是 byte,小b是bit,但是想到他俩之间的换算时,一时有些想不起来具体是1Byt ...
- Lab_0操作系统实验准备（全）
一.实验介绍 实验目的: 知识储备: 二.相关下载 1.下载镜像文件 这个镜像文件是vdi类型的,只能用visualbox下载 链接:https://pan.baidu.com/s/1L7WX6ju4 ...
- Mac下载魔兽世界怀旧服客户端 for Mac
<魔兽世界>怀旧服2019年8月9日凌晨2点开启全球压力测试,并将于8月27日正式开服.<魔兽世界>十五年,青春有它否?不见的战友,难抹的回忆,说不出口的遗憾?来,让我们一起回 ...
- Fiddler的基本使用
目录 清空历史请求 请求所消耗的时间 发送的数据在 设置fiddler过滤请求 模拟弱网环境 Ctrl+R 拦截数据,拦截数据又称"打断点" fiddler开启的时候就是默认开始抓 ...
- RequireJS 插件
网址:http://www.requirejs.cn/docs/api.html#i18n RequireJS的插件: Text:自动加载一些非js的文本文件. domReady:确保在Dom Rea ...
- 【阿里云IoT+YF3300】6.物联网设备报警配置
纵然5G时代已经在时代的浪潮中展现出了它的身影,但是就目前的物联网环境中,网络问题仍旧是一个比较突出的硬伤.众所周知,在当前的物联网规划中,与其说是实现万物互联,倒不如说是行业指标数据监控.对于一些特 ...
- php的cookie怎么使用
PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆 什么是cookie? 服务器在客户端保存用户的信息,比如登录名,密码等. 这些 ...