软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> float浮动的块状元素编写的先后顺序对页面布局的影响 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]float浮动的块状元素编写的先后顺序对页面布局的影响

  2016-04-01 16:48:34

在做一些练习题时发现一个初学者经常犯的一些错误:对浮动和定位都很理解,知道怎么使用,但是一旦做东西的时候,为什么编写出来的效果不是自己想象中的样子?
例如:我想做一个三栏布局的页面,理想效果如下图:

编写代码如下:


满心欢喜的刷出来的效果却是这个样子的:

这到底是为什么捏???
在Chrome浏览器中按F12看看吧

明白了,解释为:当写了div1左浮动后,div1是脱离文本流的,那么在写div2时,因没设置浮动,那么div2就老老实实按照文本流的安排霸占第一行,当安排div3的放置时,div3设置了右浮动,而现在已经有div2霸占了第一行,div3只好从第二行放,且右浮动,就出现了上图的效果了,如果div2足够宽的话,左部分还会被浮动的div1给覆盖掉,
如图:

好吧,这个效果我接受了,可是我怎么才可以实现我的三栏布局的效果呢,咦?我的小伙伴好像有实现的,我看看去,啊!!怎么跟我的代码没啥区别,这是肿么回事?
小伙伴的代码贴出来如下:

F12查看效果如下:

看来看去,唯一的区别就是这里了,她把div2根div3写的顺序颠倒了一下。
那么问题来了,为什么颠倒一下两个div的顺序,就出来的想要的效果了呢。


分析一下:div1设置了左浮动,不占用文本流的空间。div3设置右浮动,不占用文本流的空间。div2没有设置浮动,因为已经布置了div1和div3,目前div2是第一个占用文本流空间的,所以div2又可以霸占第一行了,常理,假如div2足够宽的话,左部分还是会被浮动的div1给覆盖掉,右部分也会被div3给覆盖掉。


这么分析对比,是不是就很好理解float属性了。
上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频 装修知识库
2017-1-20 11:49:24
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --