fi3ework's Studio.

CSS中的float和clear

2017/02/07 Share

CSS中的float和clear

引言

float是CSS中相当重要的属性,很惭愧只学了个皮毛,找个机会认真的学习一下float,以后就不要再在float的坑中摔倒了,那么开始。

1. float的定义

从网上搜了一个中文版对float的定义,出处已无法考证

CSS样式的float浮动属性,用于设置标签对象的浮动布局,浮动也就是我们所说标签对象浮动居左靠左和浮动居右靠右。

MDN中找了一个相对“官方”的定义。

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

和中文版的定义说的其实差不多,没有什么必要纠结。

2. float的各种属性

2.1 MDN

继续往下看MDN,
pic3
默认值为none,对所有非display: none的元素都适用,默认不继承。

As float implies the use of the block layout, it modifies the computed value of the display values in some cases:

应用float属性的元素将会应用block layout,将改变元素display的计算值。
pic4

left
Is a keyword indicating that the element must float on the left side of its containing block.
right
Is a keyword indicating that the element must float on the right side of its containing block.
none
Is a keyword indicating that the element must not float.

就是一些比较基本的概念,浮动到所在容器的左侧(右侧)。

2.2 W3

MDN似乎没有什么特别有用的信息,再去看W3的文档中对float的定义,毕竟文档是最权威的。
文档中写道

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

即float对绝对定位的元素不起作用。

这里float基本用法可以参见:CSS float 浮动属性

接下来再仔细看float的nine rules:

rule1

The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

左浮动盒子的左边界不会超出其容器的左边界,同理右浮动。
很好理解,浮动的边界即为其父元素的边界。

rule2

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

如果某个盒子是左浮动的,它之前有左浮动盒子,那么他一定在之前的浮动盒子的右边界右边,或者在其底边界的下面,同理右边界。
这个规则很关键,其中很容易被忽视的一点就是:这个规则对浮动元素之前的所有浮动元素都有效。

rule3

The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.

一个左浮动盒子right outer edge可能不挨着一个紧随其后的右浮动盒子的left outer edge的左边。同理右浮动。(讲真,不理解这个rule到底在说啥…)

rule4

A floating box’s outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.

浮动盒子的顶边界不能超过其容器。当???

rule5

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

浮动盒子的的顶边界不会高过任何在文档中位于它之前的块级元素或浮动盒子的顶边界。
文档流中出现的顺序对float的效果产生了重要的影响,很多时候都是文档流的顺序决定float的效果

rule 6

The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

浮动盒子的顶边界不会比任何在文档中位于它之前的包含box的line-box的顶边界高。
对line box的理解可以看 CSS float浮动的深入研究、详解及拓展(一),讲的非常详细。

rule7

A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

老实说,没看懂,看其他人的翻译是

就是如果一行之内要放第二个浮动元素,如果放不下了,那就换行。

rule8

A floating box must be placed as high as possible.

一个浮动盒子应该尽可能放的高。

rule9

A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

左浮动的盒子应尽可能往左放,同理右浮动。当元素既可以放置的更“高”,也能放置的更“左/右”时,应优先放的更“高”。

案例

case1

showpic1
代码很简单,就不帖了,在一个container里有div1~div5,都具有float: left属性(为了看清楚每个div我都加了10px的margin)。div1和div2很好理解,div1脱离文档流,浮动到最左边,右边有足够的空间,所以div2在div1的右边排列。div3也依次排列。
到了div4,由于右边的位置不够,div4只能换行,那么为什么div4在这个位置呢?因为根据rule9,高度优先,所以div4挤进了div3留下的小空里。
然后是div5,我以前一直觉得既然高度优先,div5应该紧贴在div1的下面,但为什么div5的上边界挨着div4的下边界呢(请暂时忽略margin,只是为了演示,不影响原理)?因为根据rule2——如果某个盒子是左浮动的,它之前有左浮动盒子,那么他一定在之前的浮动盒子的右边界右边,或者在其底边界的下面,同理右边界。在计算一个元素的浮动位置的时候要考虑其位置是否对之前所有的浮动元素符合rule2。如果div5的上边界紧贴着div1,那么在文档流中位于div4之后的div5就既没有在div4的下边界下面,也没有在div4的右边界右面。所以,div5会以div4的下边界为“界限”,div5的上边界与div4的下边界齐平。

case2

html如下

<div id="div1">div1:left</div>
<div id="div2">div2:left</div>
<div id="div3">div3:left</div>

show2
float设定如图所示,div3被挤到了第二行因为其在文档流中最后一个出现。
调换一下div的顺序

<div id="div1">div1:left</div>
<div id="div3">div3:left</div>
<div id="div2">div2:left</div>

show3
这回是div2被挤到了第二行,因为在文档流中最后一个出现。

参考文章

CATALOG
  1. 1. CSS中的float和clear
    1. 1.1. 引言
    2. 1.2. 1. float的定义
    3. 1.3. 2. float的各种属性
      1. 1.3.1. 2.1 MDN
      2. 1.3.2. 2.2 W3
        1. 1.3.2.1. rule1
        2. 1.3.2.2. rule2
        3. 1.3.2.3. rule3
        4. 1.3.2.4. rule4
        5. 1.3.2.5. rule5
        6. 1.3.2.6. rule 6
        7. 1.3.2.7. rule7
        8. 1.3.2.8. rule8
        9. 1.3.2.9. rule9
    4. 1.4. 案例
      1. 1.4.1. case1
      2. 1.4.2. case2
    5. 1.5. 参考文章