相信许多许多Web前端的朋友一定被float这个属性给困扰过吧,有时候用它来布局很方便,能够实现元素快速的水平排列,但有时候它又像一个精灵,让人无法琢磨透它方位。在网上也看了一些关于float的帖子,感觉这一篇写得不错,特此推荐给大家:http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

接下来就用实际例子说说float平时的常用之处:

<div class=“div”> <div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div>


.div1{
height: 2000px;
width: 960px;
outline: solid blue;
}
.div6{
height: 100px;
width: 100px;
outline: solid blue;
float: left;
}
.div7{
height: 200px;
width: 200px;
outline: solid red;
float: left; }
.div8{
float: left;
width: 50px;
height: 50px;
outline: solid black;
}

(一)有一个大的盒子,里面包含三个大小不同的框,将这三个框分别浮动后,效果如下:

可以把浮动的作用看做是退休!如果三个框不使用浮动,那么他们将按照块级元素的特点,呈垂直排列。这就好比一个干部班子,一级一级的从上向下排列。一旦使用float功能后,就如同让干部退休。1号干部退休(float)后,把权力让给了2号,2号退休后,把权力给了3号。最后,三人都是同级别的退休干部,呈水平排列。

当然,如果1号退休后把权力交给2号,2号一致赖着权力不放(float="none"),那么将会出现这样的情况:

1号虽然退休,但终究还有个位置,2号无法完全将其位置占据,使自己显示全部出,而3号等不到2号退休,只能在下面干坐着。

(二)可想而知,如果三个框都浮动了,再在下面加如下一串代码:

.div2{
height: 300px;
width: 200px;
outline: solid blue;
background-color: aqua;}
那么下面的框会自动向上,夺取权力:

那么问题来了,如果1,2,3在退休后,又不想让4来继承权力,应该怎么办呢?好办~ 去拉来一个强悍的“爸爸”罩着他们。也就是可以将1,2,3装在一个框架内:<div class="W"    <div class="div6">1</div>

    <div class="div7">2</div>    <div class="div8">3</div></div>

慢着,找来了W爸爸,总要告诉他自己需要保护吧。所以需要出发W爸爸的保护机制:
方法一:.W{overflow:hidden}
方法二:.W{display:inline-block}

这样的话,4就会乖乖的呆在下面了。

(三)float实现图文混排。(或者是文字包裹图像)
先看代码:
<p style="display: inline-block;width: 300px;outline:solid"><span style="display: inline-block;width: 100px;height: 100px;background-color: blue"></span>博客园是面向开发者的知识分享社区,不允许发布任何推广、广告、政治方面的内容。
博客园首页(即网站首页)只能发布原创的、高质量的、能让读者从中学到东西的内容。
如果博文质量不符合首页要求,会被工作人员移出首页,望理解。如有疑问,请联系contact@cnblogs.com。
</p>
效果如下:

由于图片的宽度小于p标签的宽度,所以默认会有部分文本与图片的地段对其显示。如果想要实现图片与p标签右边空白部分全部由文本填充,可以对图片进行浮动处理:
span{float:left}

图片向左浮动后,高度不存在了,文字置顶开始排列。W3C的解释是float之后,元素不占空间,但从此例来看,如果浮动后不占空间,那么文字为何没有从最左边开始排列。还是形象的看成,一个人虽然退休了,但它终究还存在在世上,离开了原来的工作岗位,但是却还是实实在在的存在。所以文字会绕道而行。。。。。关于float,以后还需进行深入的探索

浅谈css float的更多相关文章

  1. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  2. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  3. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  4. 浅谈css中的position

    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...

  5. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  6. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  7. 浅谈css的预编译---less语言

    正如各位所知道的一样,css是一门标记性语言,语法相对简单,对使用者的要求也比较低 .不过可乐不知道友友们有没有发现,在使用css的时候需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤 ...

  8. 浅谈css盒模型

    在我们网页上的每一个元素,一个按钮,一段文本,一张图片等等,浏览器都将它们当做一个“盒子”看待,并把这样的盒子称为盒模型(box model).使用Chrome的右键>审查元素对某个网页上的元素 ...

  9. 浅谈CSS布局

    在No.4中谈及了下盒子模型,引出布局模型 1.布局模型有三类: 1)流动模型  flow(默认) 2)浮动模型  float 3)层模型  layer 2.文档流 :指的是文本沿着从左到右的方向展开 ...

随机推荐

  1. ESXI root密码忘记,重置root密码

    今天遇到了一个叫人比较头疼的问题,早在一个月前公司拉来一台服务器,闲着没事我给装成了Esxi的虚拟机系统了,时间过久忘了当时设定的密码为何?故而翻了许久的资料,终于找好的方向,准备重置系统密码.准备搞 ...

  2. Zabbix 添加 WEB 监控

    添加 WEB Monitorings Web Monitoring是用来监控web程序的,可以监控到web程序的下载速度.返回码及响应时间,还支持把一组连续的web动作作为一个整体来监控. 下面我们以 ...

  3. 【做题记录】USACO gold * 50(第一篇)

    orz xhk 5/50 1597: [Usaco2008 Mar]土地购买 $ f[i]=min(f[j]+x[i]*y[j+1]) $ 然后斜率优化 1699: [Usaco2007 Jan]Ba ...

  4. java实现时钟方法汇总

    import java.awt.Dimension; import java.text.SimpleDateFormat; import java.util.Calendar; import java ...

  5. Solr 6.0 学习(五)solr基本查询和高级查询

    参考:http://www.cnblogs.com/rainbowzc/p/4354224.html 查询参数 常用: q - 查询字符串,必须的. fl - 指定返回那些字段内容,用逗号或空格分隔多 ...

  6. 11.redis连接

    转自:http://www.runoob.com/redis/redis-tutorial.html Redis 客户端连接 Redis 通过监听一个 TCP 端口或者 Unix socket 的方式 ...

  7. TortoiseSVN文件夹及文件图标不显示解决方法(兼容Window xp、window7)

    最近遇到TortoiseSVN图标(如上图:增加文件图标.文件同步完成图标等)不显示问题,网上找到的解决方法试了很多都无法真正解决,最后总结了一下,找到了终极解决方案,当然此方案也有弊端,接下来我们就 ...

  8. Javascript —— 有向图广度优先搜索

    用Javascript实现有向图的广度优先搜索 刚好遇到一个需求,对于一个有向图,指定一个节点 i 作为起点,输出从 i 出发,可以到达的所有节点,也就是图中以 i 作为起点的子连通片,思考了一下,可 ...

  9. if __name__ == '__main__'的作用和原理

    最简单的理解就是这样: __name__ 是当前模块名,当模块被直接运行时,模块名为 __main__. 所以 if __name__ == '__main__' 这句话的意思就是当前模块被直接运行时 ...

  10. minio test

    docker pull minio/minio docker run --name=minio -d  -p 9001:9000 minio/minio server /data https://do ...