软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
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 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年7日历
2018-7-23 0:45:05
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --