浮动的一些探究

时间  2019-11-07
标签 浮动 一些 探究 繁體版
原文   原文链接

内容预览

  1. 包含块css

  2. 浮动元素的特性html

  3. 浮动元素的摆放规则segmentfault

  4. 浮动元素的几种行为布局

  5. 清除浮动spa

1、包含块

全部元素的布局都是依赖于包含块的。3d

举个例子来讲code

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

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

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

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

2、浮动元素的特性

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

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

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

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

举个例子：

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

clipboard.png

如今对代码进行修改，给div加个浮动

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

clipboard.png

3、浮动元素的摆放规则

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

4、浮动元素的几种行为

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

一图胜千言。

5、清除浮动

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程