浮动的一些探究

头像
Blcover
    阅读 7 分钟
    3

    内容预览

    1. 包含块

    2. 浮动元素的特性

    3. 浮动元素的摆放规则

    4. 浮动元素的几种行为

    5. 清除浮动

    一、包含块

    所有元素的布局都是依赖于包含块的。

    举个例子来说

        <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>

    div.child的包含块就是div.parent，也就是说div.child位置的摆放是依赖于div.parent。div.parent的包含块就是body。

    一句话总结：浮动元素的包含块定义为最近的块级祖先元素。

    那么body的包含块html的包含块是谁呢？为了方便阅读，这个问题将在下次的文章中介绍。

    二、浮动元素的特性

    为了便于阅读，请先了解行内元素的相关概念以及外边距合并的原理。

    1. 浮动元素会从文档的正常流(简称文档流）中脱离，但仍会影响布局。
      正常流（文档流）：这是指西方语言文本从左到右，从上到下显示。简单来说就是一种自上而下自左而右到一种阅读方式

    2. 浮动元素的外边距不会合并

    3. 如果确实要浮动一个非替换元素，则必须为该元素声明一个width，否则根据CSS规范，元素宽度趋于0

    举个例子：

    <body>
    <div></div>
</body>

    clipboard.png

    现在对代码进行修改，给div加个浮动

    <body>
    <div style="float:left;"></div>
</body>

    clipboard.png

    三、浮动元素的摆放规则

    1）浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。

    这里的左（或右）是指浮动方向。

    <div class="wrap" style="width:400px;height:200px;border:1px solid;">
    <div class="box" style="float:left;width:100px;height:100px;background-color:red;">
    </div>
</div>

    clipboard.png

    2）浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的左（右）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。

    该规则主要针对多个浮动元素，并且防止它们发生覆盖。

    <style type="text/css">
    div{width:100px;height:100px;}
    .wrap{width:400px;height:200px;border:1px solid;}
    .box0{background-color:red;}
    .box1{background-color:blue;}
    .box2{background-color:green;}
    .fl{float:left;}
    .special{width:300px;height:100px;background:gray;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box0 fl"></div>
        <div class="box1 fl"></div>
        <div class="box2 fl"></div>
        <div class="special fl"></div>
    </div>
</body>

    clipboard.png

    3）左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。这条规则比较绕，个人理解就是多个子元素一起浮动时，在有限的宽度里不会发生重叠。

    <style type="text/css">
    div{width:300px;height:100px;}
    .wrap{width:400px;height:200px;border:1px solid;}
    .box0{background-color:red;}
    .box1{background-color:blue;}
    .fl{float:left;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box0 fl"></div>
        <div class="box1 fl"></div>
    </div>
</body>

    clipboard.png

    123总结：一般情况下，浮动元素不会发生重叠或覆盖，水平方向上也不会超出父元素边界。

    4）一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。

    内顶端在这里的意思就是content的顶部。也就是下图箭头所指蓝色区域的顶端。

    clipboard.png

    <style type="text/css">
    .wrap{width:200px;height:200px;border:1px solid;padding:20px;}
    .child{width:50px;height:50px;float:right;background-color:red;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="child">
            
        </div>
    </div>
</body>

    那么这条规则的第一句话意思就是浮动元素的顶端不会比父元素的content区顶端高。

    第二句话不太好理解，先看段代码。

    <style type="text/css">
div{margin:8px 0;}
</style>
</head>
<body>
    <div>First</div>
    <div style="float:left">Float Div</div>
    <div>Last Div</div>
</body>

    效果是这样的。

    clipboard.pngclipboard.png
    clipboard.png

    第二句话的意思个人理解为：元素浮动后外边距不再合并，而LastDiv依然处在正常流中（会与First发生合并）,所以出现FloatDiv低于LastDiv现象。

    5）浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

    这条规则比较好理解。注意这里的浮动元素和块级元素都是同级别的。

    6）如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。

    一张图理解该规则

    clipboard.png
    红色区域是浮动元素所在行的行框

    456总结：这三条规则以递进的方式来描述浮动元素在垂直向上方向的位置摆放问题。分别介绍浮动元素与包含块的位置关系，浮动元素与同级元素的位置关系以及浮动元素与其所在行框的位置关系。

    四、浮动元素的几种行为

    1. 高度过高

    高度超出包含块的高度时会发生什么？常说的高度塌陷就是这里产生的。

    clipboard.png

    在前面的规则中并没有对该情况进行处理。

    CSS2.1 中对此行为进行了说明，浮动元素会延伸，从而包含其所有后代浮动元素。所以通过将父元素设为浮动元素，就可以把浮动元素包含在其父元素内。

    <style type="text/css">
    .wrap{border:1px solid;float:left;}
    .child{width:100px;height:300px;background:red;float:left;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="child"></div>
        The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.
    </div>
</body>

    clipboard.png

    2. 负外边距

    浮动元素的规则对浮动元素在水平以及垂直朝上方向的位置摆放进行了严格限制。然而，当margin设为负值时，确实超出了包含块的边界。

    稍加修改样式

    .child{width:100px;height:300px;background:red;float:left;margin:-50px 0 0 -50px;}
body{padding:50px;}

    clipboard.png

    3. 浮动元素过宽

    浮动元素过宽时，此时会哪边会超出包含块边界，则是由浮动方向决定了。因为规则1里说的浮动元素的左（或右）边界（浮动方向）不会超过包含块的左（或右）边界。

    a.向左浮动时

    clipboard.png

    b.向右浮动时

    clipboard.png

    4.浮动元素与其他元素的重叠

    a）行内元素

    行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。

    b）块级元素

    块框与一个浮动元素重叠时，其边框和背景都在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。

    <style type="text/css">
        .box{width:200px;height:200px;background-color:#af3;float:left;margin-right:-30px;}
        span{border:1px solid;background-color:#3fa;}
        p{border:1px solid;background-color:#f3a;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <span>This is inline element</span>
        <p>This is block element</p>
    </div>
</body>

    clipboard.png

    一图胜千言。

    五、清除浮动

    CSS1和CSS2中对clear工作是这样描述的：增加元素的上外边距，使之最后落在浮动元素的下面。这也就是说清除元素的上外边距可能会调整。

    CSS2.1中，引进了一个清除区域（clearance）。清除区域时在元素的上外边距增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着在给元素设置clear时，它的外边距并不改变。之所以发生下移是这个清除区域造成的。

    这是未设置clear属性时的效果。

    <style type="text/css">
        .wrap{width:400px;height:200px;}
        div{width:100px;height:98px;border:1px solid;}
        div.fir{background-color:#af3;float:left;}
        div.sec{background-color:#3fa;width:300px;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="fir"></div>
        <div class="sec"></div>
    </div>
</body>

    clipboard.png

    给sec设置clear属性时，是这样的。红色区域是清除区域。

     div.sec{background-color:#3fa;width:300px;clear:left;}

    clipboard.png

    关于清除区域大小：个人理解这个区域的大小是不固定的，这个大小是由清除元素前面所要清除的浮动元素的大小来决定的。并且浮动元素和清除元素的方向是要保持一致的。

    css
    Blcover
    384 声望11 粉丝

    码码码码

    « 上一篇
    行内元素的一些探究
    下一篇 »
    BFC的一些探究

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    译：你该使用什么单元测试，Qunit、Jasmine还是Mocha？

    Blcover阅读 7.2k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新