A-A+

通俗讲解CSS(float)浮动

2013年03月31日 电脑知识 暂无评论 阅读 2,205 次

最近尝试自己开发一款wordpress主题,对于CSS也在抓紧时间学习,现在就跟大家分享一下有关于CSS浮动float和clear的理解。不想给大家造成太大压力,于是尽量用通俗易懂的语言,而不是不用代码给大家做介绍。

首先,我也是刚刚接触CSS不久,所以并不是对所有的都详细了解,如果遇到有什么不当之处,还望大家指出。
这里以div元素为例子做讲解,div属于块级元素,在页面之中的排列是自上而下的,也就是常常说的流。无论上一个div元素有多么的小多么的窄,第二个也不会跟在第一个之后,这是因为在标准流中的div元素是独占一行的,下面我用一个简单的图片来做示范:

div1+div2+div3+div4

但是这并不是我们做网页设计想要的,哪有这样的网页,那不得丑死。所以我们的目的就是,让不同的div元素定位到不同的位置。

所以我们在这里用到浮动float,简单的理解为让元素脱离标准流,让其可以到处浮动。如果我们让图中的div2浮动,那么他就会摆脱原来的位置,漂浮在上边,而div3和div4仍然处于标准流之中,所以div3和div4会紧跟着div1,此时div1+div3+div4重新形成标准流,连接在一起。也许你问,div2哪有浮动?不还是在原来的位置吗?你仔细看,div2已经漂浮在上边,将下边较宽的div3挡住了一部分。

div2向左浮动

如果我们将div2设置向右浮动float:right;则div2贴在了屏幕右侧,这是我们可以清楚地看到div3和div4的布局。

div2向右浮动

现在我们将div2和div3都加上浮动,效果会是怎样的呢?结果是这样的

div2+div3向左浮动

解释:div4并没有设置浮动,所以仍然与div1组成标准流,而div2和div3浮动,漂浮于标准流之上。

到这里,重点就来了,为什么div3设置了浮动之后却跟在了div2之后呢?而div2同样是浮动,为什么却没有跟在div1之后呢?

所以我们到这里可以得到结论:假设某个div元素D设置浮动,而它的上一个div元素也是浮动的,那么此div元素D就会跟在上一个浮动的div元素之后(如果此行空间不足以放得下此元素D,则此元素D放到下一行);而如果此元素D的上一个元素处于标准流之中,则此元素D位置不会被改变,并且漂浮于它的下一元素之上。

这里,我们把div2+div3+div4全部设置为向左漂浮,效果是这样的:

div2+div3+div4向左浮动

需要注意的是对于页面的两边来说,靠近页面左右边缘的是前,向里是后。

浏览器方向

所以,我们如果把div2+div3+div4全部设置为向右漂浮,效果是这样的:(由于页面的关系,我把尺寸稍作修改)

div2+div3+div4向左浮动

现在,我们把div2和div4设置为向左浮动,而div1和div3不设置,效果如图:

div2+div4向左浮动

我们来分析一下,首先div1没做任何设置,所以停留在页面最顶部,而div2发现div1处于标准流之中,所以div2浮动于div1之下,并与div1对齐。而div3同样的没有设置浮动,所以div3与div1连接形成标准流,并且被div2覆盖住一部分,而到了div4,同样发现前边的div3处于标准流之中,所以紧跟在div3下方,并与之对齐。效果如图所示:

看到这里,你应该已经理解了浮动的规则以及用法,希望我上边啰嗦的会对你有帮助。

本文链接:http://www.itzhanzhang.com/soft/popular-explain-css-float-floating.html

转载请注明,谢谢。

每天轻轻一点即可支持本站 天猫2015双11爆款

给我留言

Copyright © IT站长 保留所有权利.   Theme  Ality 鲁ICP备14024692号

用户登录

分享到: