俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

CSS 深入理解之 float 浮动

CSS深入理解之absolute定位

2018/05/25 · CSS · absolute

原文出处: micstone   

CSS 深入理解之 float 浮动

2018/05/25 · CSS · float

原文出处: micstone   

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有”刨根问底”的精神,这样在出现一些问题的时候才不至于”手慌脚乱”!因此,今天就特别整理和总结一下float属性。

1. 写在前面

本篇将要介绍的绝对定位absolute属性和此前介绍的CSS系列——CSS深入理解之float浮动有着几分的相似性,可以认为两者是兄弟关系,都具有“包裹性”、“高度塌陷”、“块状化”的特性,它们在很多场合都可以互相替代。很多人可能有这样的疑问:一个属性名是“position”,一个属性名是“float”,从名字看起来,它们八竿子都打不着啊,怎么还是兄弟关系呢?要说position: absoluteposition: relative是兄弟关系还能理解,要说和float是兄弟关系我就纳闷!!!呵呵~~~~,别急,这就是写作本文的目的。

1. float介绍

CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离,相当于不占据任何空间,所以文档中普通流中的元素表现的就像浮动元素不存在一样,因此,设置float属性的后会影响我们的页面布局。具体说来就是:让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

float属性设计的初衷:仅仅是让文字像流水一样环绕浮动元素,就像下图中展示的一样:

俄罗斯贵宾会 1

2. absolute的特性

在介绍absolute之前,有以下公共CSS代码:

/* CSS代码 */ .father{ border: 2px solid deeppink; width: 200px; } .son { position: absolute; font-size: 0; border: 2px solid blue; padding: 5px; } .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 2px solid deeppink;
    width: 200px;
}
.son {
    position: absolute;
    font-size: 0;
    border: 2px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

2. float的特性

float有哪些有意思的特性呢?具体如下:

  • 包裹性
  • 高度塌陷
  • 块状化
  • 没有任何margin合并

下面将详细阐述这几点的含义。

2.1 包裹性

然后有以下html代码:

<div class="father"> <!--son1与son的唯一区别是son1的position设置为static--> <div class="son1"> <img src="../../lib/img/mm1.png"/></div> </div> <br/><br/><div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"/></div> </div>

1
2
3
4
5
6
7
8
9
<div class="father">
    <!--son1与son的唯一区别是son1的position设置为static-->
    <div class="son1">
        <img src="../../lib/img/mm1.png"/></div>
</div>
<br/><br/><div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png"/></div>
</div>

最终显示的效果如下图所示:

俄罗斯贵宾会 2

在本例中,son1与son的唯一区别是son1的position设置为static。 .father元素的宽度设置为200pximg元素是一个128px宽度的图片,则此时绝对定位元素宽度表现为”包裹性”,其宽度也就是里面图片的宽度128px。

由于绝对定位元素宽度表现为”包裹性”,因此,下面的CSS写法就是多余的:

.wrap{ display: inline-block;// 没有必要 position: absolute; }

1
2
3
4
.wrap{
    display: inline-block;// 没有必要
    position: absolute;
}

2.1 包裹性

所谓”包裹性”,其实是由”包裹”和”自适应”两部分组成。假设有以下CSS代码:

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 200px; } .son { float: left; font-size: 0; border: 1px solid blue; padding: 5px; } .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1)包裹。本例中将浮动元素父元素宽度设置为200px,浮动元素的子元素是一个128px宽度的图片,则此时浮动元素宽度表现为”包裹”,也就是里面图片的宽度128px。

/* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

1
2
3
4
5
6
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

 俄罗斯贵宾会 3

 

2)自适应性。在浮动子元素的中增加一些文字:

/* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span> </div> </div>

1
2
3
4
5
6
7
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
        <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
    </div>
</div>

此时,浮动元素宽度就自适应父元素的200px宽度,最终的宽度表现也是200px。如下图所示:

俄罗斯贵宾会 4

2.2 高度塌陷

基于上图,父元素div的高度并没有被子元素撑开(粉色区域),这种效果可以称为”高度塌陷“。导致高度塌陷的原因是因为浮动元素脱离了正常的文档流,则div.father认为其没有子元素,所以产生了高度塌陷。

如果在.father元素增加子元素,如下:

<!--HTML代码--> <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> 美女1,美女2,美女3,美女4,美女5 </div>

1
2
3
4
5
6
7
<!--HTML代码-->
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    美女1,美女2,美女3,美女4,美女5
</div>

则在浏览器中的效果如下:

俄罗斯贵宾会 5

从图中明显看出文字被图片遮盖了,这一点和float不同。因为,float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽,而设置了absolute的图片元素出现了层级关系,已经脱离了正常的文档流了,从父元素的视点看,图片已经完全消失不见了,因此从最左边开始显示文字,而absolute的层级高,所以图片遮盖了文字。

2.2 高度塌陷

float属性有一个著名的特性:会让父元素的高度塌陷。如章节2.1中的效果图,父元素div的高度并没有被子元素撑开(粉色区域),这种效果可以称为”高度塌陷“。导致高度塌陷的原因是因为浮动元素脱离了正常的文档流,则div.father认为其没有子元素,所以产生了高度塌陷。后文中将讲述如何解决高度塌陷的问题。

2.3 块状化

块状化的意思是,一旦元素position的属性为absolute或者fixed,则其display计算值就是block或者table。可以复制以下代码到浏览器控制台中:

var span = document.createElement('span') document.body.appendChild(span) console.log('1.' + window.getComputedStyle(span).display) // 设置元素绝对定位 span.style.position = 'absolute' console.log('2.' + window.getComputedStyle(span).display) document.getElementById("aa").style.display = "block"

1
2
3
4
5
6
7
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素绝对定位
span.style.position = 'absolute'
console.log('2.' + window.getComputedStyle(span).display)
document.getElementById("aa").style.display = "block"

则在浏览器控制台中的结果如下:

1.inline 2.block

1
2
1.inline
2.block

2.3 块状化

块状化的意思是,一旦元素float的属性不为none,则其display计算值就是block或者table。举个例子:

/* JavaScript代码 */ var span = document.createElement('span') document.body.appendChild(span) console.log('1.' + window.getComputedStyle(span).display) // 设置元素左浮动 span.style.cssFloat = 'left' console.log('2.' + window.getComputedStyle(span).display)

1
2
3
4
5
6
7
/* JavaScript代码 */
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = 'left'
console.log('2.' + window.getComputedStyle(span).display)

在控制台中的结果如下:

1.inline 2.block

1
2
1.inline
2.block

不知道大家有没有跟我一样的疑问:既然设置float后,元素就块状化了,那么怎么还能产生包裹性的效果呢?回答这个问题,需要重新阐述下块状化的意思,这里的块状化意思是可以像block元素一样设置宽和高,并不是真正的块元素。

因此,没有任何理由出现下面的样式组合:

span{ display: block; /* 多余 */ float: left; } span{ float: left; vertical-align: middle; /* 多余 */ }

1
2
3
4
5
6
7
8
span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

2.4 小结

对于上面对absolute的介绍,对比float属性,是不是应该理解他们是兄弟关系呢?如果你非得不这样认为可以,只要你明白absolute的特性即可。绝大多数前端开发人员应该都懂,但是如果本文只是介绍上面的知识点,就太对不起大家的期待了!下面将要介绍absolute的流体与相对特性才是本文的重点。

2.4 没有任何的margin重叠

在这里,我们将.son类增加margin:10px样式,在浏览器中查看实际效果。

/* HTML 代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> <div class="son"> <img src="../../lib/img/mm1.png"> </div> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
/* HTML 代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

俄罗斯贵宾会 6

我们增加.son类的margin为10px,在浏览器中查看相邻的.son元素的空白区域的高度是20px,可以发现设置了float属性的元素没有任何的margin重叠,这和普通的元素margin重叠不一样。

3. absolute流体与相对特性

3. float与流体布局

使用float可以通过破坏正常的文档流实现CSS环绕,但是却带来了”高度塌陷”的问题!然而我们可以利用float破坏正常文档流的特性实现一些常用的布局:

  • 文字环绕变身-中间内容居中,左中右布局

直接看例子:

<div class="box"> <a href="javascript:;" class="fl">左青龙</a> <a href="javascript:;" class="fr">右白虎</a> <h3 class="text-center">标题</h3> </div>

1
2
3
4
5
<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.box{ background-color: #f5f5f5; } .fl{ float: left; } .fr{ float: right; } .text-center{ text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

从下图中看出,实现了中间内容居中的左中右布局。

俄罗斯贵宾会 7

  • 文字环绕的衍生-单侧固定
&lt;div class="box"&gt; &lt;a href="javascript:;"
class="fl"&gt;左青龙&lt;/a&gt; &lt;a href="javascript:;"
class="fr"&gt;右白虎&lt;/a&gt; &lt;h3
class="text-center"&gt;标题&lt;/h3&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384a3401669605-1" class="crayon-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-2" class="crayon-line crayon-striped-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fl&quot;&gt;左青龙&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-3" class="crayon-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fr&quot;&gt;右白虎&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-4" class="crayon-line crayon-striped-line">
    &lt;h3 class=&quot;text-center&quot;&gt;标题&lt;/h3&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

.father{ border: 1px solid #444; overflow: hidden; } .father > img { width: 60px; height: 64px; float: left; } .girl { /* 环绕和自适应的区别所在 *俄罗斯贵宾会,/ margin-left: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 环绕和自适应的区别所在 */
    margin-left: 70px;
}

和文字环绕效果相比,区别就是.girl多了一个margin-left: 70px,同时图片的宽度设置60px,因此不会发生文字环绕的效果。这里,我们也可以不使用margin-left,改用border-left或者padding-left都可以达到改变content box的尺寸,从而实现宽度自适应布局效果。

俄罗斯贵宾会 8

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:CSS 深入理解之 float 浮动

您可能还会对下面的文章感兴趣: