宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”。
标准流里面的限制非常多,导致很多页面效果无法实现。
如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:超脱!脱离标准流!
浮动是css里面布局用的最多的属性。
现在有两个div,分别设置宽高。我们知道,它们的效果如下:
此时,如果给这两个div增加一个浮动属性,比如float: left;,效果如下:
这就达到了浮动的效果。此时,两个元素并排了。(这在标准流中,不能实现)。
浮动想学好,一定要知道四个性质。接下来讲一讲。
性质1:浮动的元素脱标脱标即脱离标准流。
我们来看一个例子。
上图中,在默认情况下,两个div标签是上下进行排列的。现在由于float属性让上图中的第一个
性质2:浮动的元素互相贴靠
我们来看一个例子就明白了。我们给三个div均设置了float: left;属性之后,然后设置宽高。可以看到div的贴靠效果:
性质3:浮动的元素有“字围”效果
来看一张图就明白了。
我们让div浮动,p不浮动上图中,我们发现:div挡住了p,但不会挡住p中的文字,形成“字围”效果。
性质4:收缩
收缩:一个浮动的元素,如果没有设置宽高,那么将自动收缩为内容的宽高(这点非常像行内元素)。
div设置宽高:
div不设置宽高:
上图中,div本身是块级元素,如果不设置widh,它会单独霸占整行;但是,设置div浮动后,它会收缩
至此,在单独使用浮动时的一些特点就结束啦!!!当然,实际开发时,更多是浮动后带来的问题,我们下次见面再细说。【逆战】