CSS浮动

前言:相信很多人都看过浮动,但是却云里雾里的,不怎么理解。今天将我理解的浮动知识整理分享一下。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。


浮动

Div属于块级元素,这个应该不用我多说吧,你要是不知道就自刎去吧。。。

对于三个并列的div,他们的样子是这样的,不管它们的长度是多少的,反正都是独占一行: image

我感觉浮动和position:absolute从某种角度上讲是类似的,都是让元素脱离标准流(都是刺头啊,很有个性)。

如果我们让div2变成左浮动的,那么效果就是这样的:

image

可以看到,由于div2是变成了浮动元素,脱离了标准流,div3就感觉不到div2的存在,然后就跑到div1下面去了。这里我设置的div2是左浮动,如果换成右浮动就是这样的效果:

image

一个元素浮动是上面这样的,那么两个会是什么情况呢?我们在试一下含有两个浮动元素的情况,弄四个div,让中间两个变成浮动的:

四个元素都不浮动的时候是这样的:

image

中间两个元素红色和黑色左浮动后是这样的:

image

中间两个元素红色和黑色右浮动后是这样的: image

浮动只有向左和向右,没有向上和向下,所以不能改变div的顺序!

就像上图中的红色和黑色div,它们都是浮动的,但是不会顶到最上面遮住绿色的div。并且红色div先右浮动,黑色div后右浮动,所以红色div在最右,黑色div向右浮动知道碰到浮动的红色div的边框(见引用),如果黑色div和红色div的宽度之和超过了整个宽度,则黑色div会往下移动而不是红色div(毕竟红色div是先来的嘛,先到先得)。


清除浮动

上面基本已经讲完了浮动,现在讲一下清除浮动的知识。清除浮动有四个取值:clear:none | left | right | both。

关键:clear只能作用于需要影响的元素本身,不影响其它元素。

举个栗子,比如上图,黑色div和红色div都是右浮动,并且两者宽度之和没有超过整个宽度。现在希望红色左边不允许出现浮动元素,想让黑色div滚下去,如果你在红色div里面写clear:left。会发生啥捏?并没有什么卵用!

正确的做法是:想要黑色的下去,直接在黑色div里面加上clear:right。意思是我不希望黑色div右边有浮动元素,那么黑色div被迫就需要下去喽:)


相信大家现在对浮动理解的应该差不多了,再来最后一个小栗子,提高一下姿势。


<div style="border:4px solid blue;">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
</div>
<div style="border:4px solid gray;">我是页脚</div>

这段代码是如下的效果: image

哎呀!不是我们想要的效果,出现了好几个问题啊。慢慢来,先解决第一个,我们先让页脚滚下去。是的,直接对页脚使用clear:left就行。我不希望左边有浮动元素,没办法,左边资历都比我老,我自己下去好了。然后就变成这个样子了:

image

好了,第一个问题解决了,我们来解决一下第二个问题,包围浮动元素1和浮动元素2的div怎么没有包围呢?因为浮动元素脱离了文档流,所以外面这个div不占据空间了!现在我们要让它把这两个浮动元素包围进去。有两种方法:

方法一:现在这个外围div里面只有两个浮动元素,我们添加一个空元素,让这个元素两边都不允许出现浮动元素,那么这个空元素不就下去了吗,那么外围div不就包住了嘛。

<div style="border:4px solid blue;">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
   <div style="clear:both;"></div>
</div>

image

方法一的缺点是我们为了布局得添加很多向上面空div一样的没有意义的东西。


方法二:我们不考虑从里面入手,而直接对外围div进行操作,让它变成浮动。

<div style="border:4px solid blue;float:left">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
</div>

image

but,它也是有缺点的,以后的元素咋办,它们不得不统一都采用浮动,然后用一些元素对浮动进行清理。

JSRUN notes