CSS 的浮动是经常会在实际中运用到,之前我对浮动的理解就是使用 float,除此之外没有深入理解,后来发现对于浮动还是有必要深入理解一下。
css 浮动
css 的浮动是 float 属性,该属性没有继承性,默认值为 none,该属性有四个值,以下一一解释:
1)right:向右浮动
2)left:向左浮动
3)none:没有浮动
4)inherit:规定继承父元素的浮动
css 的浮动实际上就是打破标准流,如果说没有浮动的元素是在一个标准流里,那么浮动的元素将脱离原本的标准流浮动。
元素的浮动效果
例子:以下四个 div 并没有进行浮动设置
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- 测试
- </title>
- <meta charset="utf-8" />
- <style type="text/css">
- .div1{width:1000px;height:100px;background:red;} .div2{width:200px;height:100px;background:yellow;}
- .div3{width:800px;height:100px;background:green;} .div4{width:700px;height:100px;background:blue;}
- </style>
- </head>
- <body>
- <div class="div1">
- div1
- </div>
- <div class="div2">
- div2
- </div>
- <div class="div3">
- div3
- </div>
- <div class="div4">
- div4
- </div>
- </body>
- </html>
我们来看一下下面的 3d 视图,就会发现这四个 div 处于同一个标准流,相对于 body 层另起一层,下方紫色的边缘白色底的是 body 层,白色边白色底为 html 层,为了看得更清晰,我调整了角度。
由于每个 div 独占一行,根据标准流 div1、div2、div3、div4 自上而下进行排列!
下面我们将 css 改动一下对 div1 进行右浮动,为了让例子更明显,将 div2 的 height 改为 200px,且 div 的 width 改为 1500px,具体如下,改动的部分标红了:
- .div1 {
- width: 1500px;
- height: 100px;
- background: red;
- float: right;
- }.div2 {
- width: 200px;
- height: 200px;
- background: yellow;
- }.div3 {
- width: 800px;
- height: 100px;
- background: green;
- }.div4 {
- width: 700px;
- height: 100px;
- background: blue;
- }
在看 3d 视图前我们先来看普通的页面显示:
在页面显示里我们看得出 div1 右浮动,导致 div1 浮到了最右边,而且 div2 上浮动了,div1 位于 div2 的所在的层的上方覆盖了 div2 的一部分,可以证实 div1 和 div2、div3、div4 不是在一个标准流上,div1 打破了原先的标准流,进行了浮动,因此 div2 取代了之前 div1 的标准流代替了 div1 原先的位置,下面我们来看看 3d 视图就能更清晰的了解到这一点:
自此我们可以得出结论,没有设置浮动属性的元素皆为同一个标准流上,浮动的属性会相对于浮动的对象漂浮在上方,而且会放弃原本没有浮动所占的标准流位置,这就是为什么 div1 浮动后,div2 会跑到上面来的原因,因为原先 div1 所占的位置清空了,原先的标准流被破坏并进行了重新配置,所以 div2 向上移动到原先 div1 所占的位置!
那么还有一个问题,为什么是 div1 遮盖 div2,不是 div2 遮盖 div1 呢?因为浮动的元素总会位于原先所处的标准流上方!这个非常重要,这里 div1、div2、div3、div4 原本是同一个标准流,但是 div1 浮动后打破了原先的标准流,因此 div1 总会位于这个破坏重新建构的标准流上方!这样就很好理解了。
下面为了能更熟悉浮动的这种理论模式,我们多看一个例子,便于更好的理解:
- .div1 {
- width: 1500px;
- height: 400px;
- background: red;
- float: right;
- }.div2 {
- width: 200px;
- height: 200px;
- background: yellow;
- }.div3 {
- width: 800px;
- height: 100px;
- background: green;
- float: left;
- }.div4 {
- width: 700px;
- height: 100px;
- background: blue;
- }
页面渲染如下:
我们看上面的 css 代码标红部分,改动的地方为 div 的 height 为 400,div3 改为了左浮动,那么 div2 和 div4 是没有浮动的,它们在一个标准流里,并且因为 div1 和 div3 已经浮动了,所以以前占据的空间已经清空,原先的标准流被打破并且重新建构,因此 div2 和 div4 重新布局顶替了原先 div1 和 div3 的位置,而 div1 和 div3 之前都是在同一个标准流,所以浮动 后它们位于同一个流里,虽然都在 div2 和 div4 上方,但是 div1 和 div3 会按照新的标准流从上而下排列,而不会互相覆盖!因此如上图那样。
先来看看页面渲染的结果:
来源: