CSS基础之浮动属性float图文详解

时间:2024-03-29 15:01:17

宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”。

标准流里面的限制非常多,导致很多页面效果无法实现。

如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:超脱!脱离标准流!

浮动是css里面布局用的最多的属性。

现在有两个div,分别设置宽高。我们知道,它们的效果如下:
CSS基础之浮动属性float图文详解
此时,如果给这两个div增加一个浮动属性,比如float: left;,效果如下:
CSS基础之浮动属性float图文详解
这就达到了浮动的效果。此时,两个元素并排了。(这在标准流中,不能实现)。

浮动想学好,一定要知道四个性质。接下来讲一讲。

性质1:浮动的元素脱标脱标即脱离标准流。

我们来看一个例子。
CSS基础之浮动属性float图文详解
上图中,在默认情况下,两个div标签是上下进行排列的。现在由于float属性让上图中的第一个

标签出现了浮动,于是这个标签在另外一个层面上进行排列。而第二个
还在自己的层面上遵从标准流进行排列。

性质2:浮动的元素互相贴靠
CSS基础之浮动属性float图文详解
我们来看一个例子就明白了。我们给三个div均设置了float: left;属性之后,然后设置宽高。可以看到div的贴靠效果:

性质3:浮动的元素有“字围”效果

来看一张图就明白了。
CSS基础之浮动属性float图文详解
我们让div浮动,p不浮动上图中,我们发现:div挡住了p,但不会挡住p中的文字,形成“字围”效果。

性质4:收缩
收缩:一个浮动的元素,如果没有设置宽高,那么将自动收缩为内容的宽高(这点非常像行内元素)。
div设置宽高:
CSS基础之浮动属性float图文详解
div不设置宽高:
CSS基础之浮动属性float图文详解
上图中,div本身是块级元素,如果不设置widh,它会单独霸占整行;但是,设置div浮动后,它会收缩

至此,在单独使用浮动时的一些特点就结束啦!!!当然,实际开发时,更多是浮动后带来的问题,我们下次见面再细说。【逆战】