【前端Talkking】CSS系列——CSS深刻理解之float浮动

时间 2019-11-05

标签前端Talkking css 系列深刻理解 float 浮动栏目 CSS 繁體版

原文原文链接

float属性是CSS中经常使用的一个属性，在实际工做中使用的很是多，若是使用不当就会出现意料以外的效果。虽然不少人说浮动会用就行、浮动过期了，可是对于优秀的前端开发人员，须要有"刨根问底"的精神，这样在出现一些问题的时候才不至于"手慌脚乱"！所以，今天就特别整理和总结一下float属性。

1. float介绍

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

float属性设计的初衷：仅仅是让文字像流水同样环绕浮动元素，就像下图中展现的同样：css

2. float的特性

float有哪些有意思的特性呢？具体以下：html

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

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

2.1 包裹性

所谓"包裹性"，实际上是由"包裹"和"自适应"两部分组成。假设有如下CSS代码：java

/* 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>

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>

此时，浮动元素宽度就自适应父元素的200px宽度，最终的宽度表现也是200px。以下图所示：app

2.2 高度塌陷

float属性有一个著名的特性：会让父元素的高度塌陷。如章节2.1中的效果图，父元素div的高度并无被子元素撑开(粉色区域)，这种效果能够称为"高度塌陷"。float给div.son施了个障眼法，让该元素的高度塌陷为0了，这样外层div计算高度时，认为div.son的高度为0，至关于div.son的content的高度为0，则div.father认为其没有子元素，因此产生了高度塌陷。后文中将讲述如何解决高度塌陷的问题。布局

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.inline
2.block

不知道你们有没有跟我同样的疑问：既然设置float后，元素就块状化了，那么怎么还能产生包裹性的效果呢？回答这个问题，须要从新阐述下块状化的意思，这里的块状化意思是能够像block元素同样设置宽和高，并非真正的块元素。

所以，没有任何理由出现下面的样式组合：

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

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>

咱们增长.son类的margin为10px，在浏览器中查看相邻的.son元素的空白区域的高度是20px，能够发现设置了float属性的元素没有任何的margin重叠，这和普通的元素margin重叠不同。

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>

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

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

文字环绕的衍生-单侧固定

<div class="father">
    <img src="../../lib/img/008.JPG">
    <p class="girl">美女1，美女2，美女3，美女4，美女5，美女6，后宫1，后宫2，后宫3，后宫4，后宫5，后宫6</p>
</div>

.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的尺寸，从而实现宽度自适应布局效果。

4. float的克星

既然使用float属性会带来一系列的问题，那么有没有办法消除这些问题呢？答案是：确定有。接着看下文。

4.1 clear属性

在CSS中可使用clear来清除float属性带来高度塌陷等问题，使用格式以下：

clear: none | left | right | both

none：默认值，容许两边都有浮动对象；
left：不容许左侧有浮动对象；
right：不容许右侧有浮动对象；
both：两侧不容许有浮动对象。

若是单从字面上的意思来理解，clear:left应该是"清除左浮动"，clear:right应该是"清除右浮动"，实际上，这种说法是有问题的，由于浮动一直还在，并无清除！只能清除浮动带来的影响。

官方对clear属性的解释是："元素盒子的边不能和前面的浮动元素相邻"。注意这里的"前面的"3个字，也就是clear属性对"后面的"浮动元素是漠不关心的。clear属性只能清除元素的自身，不能影响其余的元素。接着看下面的这个例子：

/* HTML代码 */
<div class="box1"></div>
<div class="box2"></div>

/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

如上图所示，box1元素为设置了左浮动，已经脱离了正常的文档流，因此box2可以在box1的底层显示。若是想让box2可以换行排列，则只须要在.box2类中增长clear:left样式便可。以下图所示：

4.2 clear属性的不足

clear属性只对块级元素有效，可是::after等伪元素默认都是内联水平，所以，在实际工做中，咱们经常使用下面的代码来清除浮动带来的影响：

.clear::after{
    content: "";
    display: table;/*也能够是'block'或者是'list-item'*/
    clear: both;
}

因为clear:both做用的本质是让本身不和float元素在一行显示，并非真正意义上的清除浮动，所以float元素有一些很差的特性依然存在，表如今：

若是clear:both元素前面的元素就是float元素，则设置margin-top无效;

/* HTML代码 */
<div class="box1"></div>
<div class="box2"></div>

/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在本例中，设置.box2中的margin-top没有任何的效果，以下图所示：

clear:both后面的元素依旧可能会发生文字环绕现象。

<div class="father">
    <div class="float">
        <img src="../../lib/img/mm1.png">
    </div>
    <p>美女1，美女2，美女3，美女4，美女5，美女6，后宫1，后宫2，后宫3，后宫</p>
</div>
<div>我要美女1，我还要美女2</div>

/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: '';
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

在本例中，设置clean:both来阻止浮动对后面元素的影响，可是最后的错位效果依然发生了（能够设置.father的字体大小为0，而后设置p标签的字体大小解决错误的问题）。

因而可知，clear:both只能在必定程度上消除浮动的影响，要想完美去除浮动元素的影响，借助其余的手段——BFC，接着看下文。

5. CSS世界的结界——BFC

5.1 BFC的定义

BFC全称block formatting context，中文为"块级格式化上下文"。BFC的表现原则为：若是一个元素具备BFC，那么它的内部子元素再怎么翻江倒海，都不会影响外部的元素。所以，BFC元素是不可能发生margin重叠的，另外，BFC元素也能够用来清除浮动的影响。

那么知足什么条件才会有BFC呢？只要知足下面任意一个条件就会触发BFC:

html根元素；
float的值不为none；
overflow的值为auto、scroll或者hidden；
display的值为table-cell、table-caption和inline-block中的任何一个；
position的值不为relative和static；

触发BFC后，就不须要使用clear:both属性去清除浮动的影响。

5.2 BFC的做用

清除margin重叠

/* HTML 代码 */
<div class="parent">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
    <p>item 4</p>
</div>

/* CSS 代码 */
.parent{
    width: 300px;
    background-color: black;
    overflow: hidden;
}
p {
    background-color: white;
    margin: 10px 0;
    text-align: center;
}

在这种状况下，出现了margin重叠的效果。以下图所示：

利用BFC能消除margin重叠，谨记：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase。若是它们属于不一样的BFC，则不会有margin重叠。所以咱们能够再创建一个BFC去阻止margin重叠的发生。因此为了让他们的margin变成20px，咱们只须要用div,创建一个BFC，令p元素处于不一样BFC便可。请看例子：

/* HTML代码 */
<div class="parent">
    <p>item 1</p>
    <p>item 2</p>
    <div style="overflow: hidden">
        <p>item 3</p>
    </div>
    <p>item 4</p>
</div>

从下图中能够看出，借助BFC消除了margin重叠的问题。

清除高度塌陷的问题

在上面的章节中，若是子元素设置浮动属性，则父元素就会出现高度塌陷的问题。在这里，咱们能够借助BFC消除高度塌陷的问题了，请看下面的这个例子：

/* HTML代码 */
<div style="border: 1px solid deeppink;width: 200px; overflow: hidden">
    <img src="../../lib/img/mm1.png" style="border: 1px solid blue; float: left">
</div>

从下图中能够看到，设置overflow:hidden样式后就产生了BFC，根据BFC的表现规则，内部元素的样式不会影响外部元素的样式，所以没有出现高度塌陷的问题。

自适应布局（阻止文本换行）

/* HTML代码 */
<div class="parent">
    <img src="../../lib/img/mm1.png">
    <p class="girl">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,</p>
</div>

/* CSS代码 */
.parent{
    border: 1px solid deeppink;
    width: 200px;
    font-size: 0;
}
.parent img{
    border: 1px solid blue;
    float: left;
}
.girl{
    /*overflow: hidden;*/
    font-size: 12px;
    background-color: #cdcdcd;
}

若是咱们给.girl元素设置具备BFC特性的属性，如：overflow: hidden就能够实现更健壮、更智能的自适应布局。

这里的.girl元素为了避免和浮动元素产生任何交集，顺着浮动边缘造成本身的封闭上下文。

普通元素在设置了overflow:hidden后，会自动填满容器中除了浮动元素意外的剩余空间，造成自适应效果，这种自适应布局和纯流体布局相比：

自适应内容因为封闭而更加健壮，容错性更强；
自适应内容可以填满除浮动元素之外区域，不须要关心浮动元素宽度。

6. 结语

本文是我学习float属性总结文章，可能存在理解准确的地方，欢迎你们在评论区评论，指点迷津，你们互相帮助，互相进步。

最后，但愿本文的内容可以对您对float的理解可以有所帮助，感谢阅读。

参考

张鑫旭-《CSS世界》

碰见了，不妨关注下个人微信公众号「前端Talkking」