软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> float浮动的块状元素编写的先后顺序对页面布局的影响 -> 正文阅读

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


在做一些练习题时发现一个初学者经常犯的一些错误:对浮动和定位都很理解,知道怎么使用,但是一旦做东西的时候,为什么编写出来的效果不是自己想象中的样子?
例如:我想做一个三栏布局的页面,理想效果如下图:
[img]http://img.blog.csdn.net/20160401115915741?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
编写代码如下:
[img][img]http://img.blog.csdn.net/20160401131848255?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[img][img]http://img.blog.csdn.net/20160401153954013?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
满心欢喜的刷出来的效果却是这个样子的:
[img]http://img.blog.csdn.net/20160401132234335?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
这到底是为什么捏???
在Chrome浏览器中按F12看看吧
[img]http://img.blog.csdn.net/20160401132919306?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
明白了,解释为:当写了div1左浮动后,div1是脱离文本流的,那么在写div2时,因没设置浮动,那么div2就老老实实按照文本流的安排霸占第一行,当安排div3的放置时,div3设置了右浮动,而现在已经有div2霸占了第一行,div3只好从第二行放,且右浮动,就出现了上图的效果了,如果div2足够宽的话,左部分还会被浮动的div1给覆盖掉,
如图:
[img]http://img.blog.csdn.net/20160401133407496?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
好吧,这个效果我接受了,可是我怎么才可以实现我的三栏布局的效果呢,咦?我的小伙伴好像有实现的,我看看去,啊!!怎么跟我的代码没啥区别,这是肿么回事?
小伙伴的代码贴出来如下:
[img]http://img.blog.csdn.net/20160401133858466?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
F12查看效果如下:
[img]http://img.blog.csdn.net/20160401134352218?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
看来看去,唯一的区别就是这里了,她把div2根div3写的顺序颠倒了一下。
那么问题来了,为什么颠倒一下两个div的顺序,就出来的想要的效果了呢。


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


这么分析对比,是不是就很好理解float属性了。
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-7-23 0:51:17
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --