使用float设置经典的网站前端结构
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设置经典的网站前端结构的更多相关文章
- 使用float设置经典的网站前端结构(深入探讨)
.要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...
- 使用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获取到的是比较好的,有目录结构的源文件.
随机推荐
- Network in Network(2013),1x1卷积与Global Average Pooling
目录 写在前面 mlpconv layer实现 Global Average Pooling 网络结构 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 <Net ...
- Swoole4-swoole创建Mysql连接池
一 .什么是mysql连接池 场景:每秒同时有1000个并发,但是这个mysql同时只能处理400个连接,mysql会宕机. 解决方案:连接池,这个连接池建立了200个和mysql的连接,这1000个 ...
- spring boot项目下的application.properties中的logging.level设置日志级别
日志级别 trace<debug<info<warn<error<fatal 默认级别为info,即默认打印info及其以上级别的日志,如下: logging.level ...
- Java零基础手把手系列:HashMap排序方法一网打尽
HashMap的排序在一开始学习Java的时候,比较容易晕,今天总结了一些常见的方法,一网打尽.HashMap的排序入门,看这篇文章就够了. 1. 概述 本文排序HashMap的键(key)和值(va ...
- Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
使用vue init webpack 你的项目名称初始化一个vue的项目 安装依赖 npm install vue-resource http-proxy-middleware vuex koa 在项 ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- PHP array_slice
1.函数的作用:返回数组中的部分区间的元素 2.函数的参数: @params array $array @params int $offset @params int $l ...
- Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
- 一篇文章彻底搞懂snowflake算法及百度美团的最佳实践
写在前面的话 一提到分布式ID自动生成方案,大家肯定都非常熟悉,并且立即能说出自家拿手的几种方案,确实,ID作为系统数据的重要标识,重要性不言而喻,而各种方案也是历经多代优化,请允许我用这个视角对分布 ...
- SpringCloud之RefreshScope 源码解读
SpringCloud之RefreshScope @Scope 源码解读 Scope(org.springframework.beans.factory.config.Scope)是Spring 2. ...