关于css浮动的一点思考

浮动到底是什么？

浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！

浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示：

 

文字环绕效果

但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在，在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。

浮动有哪些特征？

浮动的特征就体现在前文的那句话中，别忘了默念三次！此外，浮动带来的负效果也算是它的特征之一。

浮动会脱离文档

脱离文档，也就是说浮动不会影响普通元素的布局

 

浮动会脱离文档流

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

浮动可以内联排列

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。

 

浮动可以内联排列

从上图可以看出，对多个元素设置浮动，可以实现类似inline-block的效果；但是如果每个元素的高度不一致，会出现“卡住”的情况。

浮动会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
   100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

// html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

 

父元素高度坍塌

那怎么办呢？那就需要我们清除浮动，来解决高度坍塌问题！
清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动，其他的你也不用去了解了。

clear如何清除浮动？

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。这句话，请默念5次！
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

还是接着上面的例子，我们简单修改一下HTML代码，如下

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>

 

clear清除浮动

高度坍塌的问题解决了，至此，好像浮动我们可以随便玩了，真棒！

不要在浮动元素上清除浮动

但是有人问到，如果我们给第三个元素加上clear:both，结果会怎样？

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>

 

不要在浮动元素上清除浮动

诶？给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。

clear清除浮动最佳实践

那么clear清除浮动的最佳实践是什么呢？请看如下代码：

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

 

clearfix清除浮动

一句话，强烈推荐clearfix的方式清除浮动！

BFC清除浮动

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

✦ BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

其中，BFC清除浮动就是用的“包含浮动”这条特性。
那么，怎样才能触发BFC呢？

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。

.box-wrapper{
  overflow: hidden;
}

浮动的适用场景有哪些？

文字环绕效果

这个不用说了，浮动本来就是为文字环绕效果而生，这是最基本的

 

文字环绕效果

页面布局

浮动可以实现常规的多列布局，但个人推荐使用inline-block。
浮动更适合实现自适应多列布局，比如左侧固定宽度，右侧根据父元素宽度自适应。

 

页面布局

多个元素内联排列

如果前文提到的，浮动可以实现类似inline-block的排列，比如菜单多个元素内联排列。但个人推荐使用inline-block。

 

多个元素内联排列

又来点总结？

本来只是想简单说说浮动的背景、浮动的问题，浮动的解决方案，但真整理起来的时候，又发现很多知识点需要扩展，很多东西需要掰扯，一文难以言尽，所以只挑一些我觉得比较主流比较重要的知识写出来，如果有兴趣可以自行展开。

✦ 浮动最初设计只是用来实现文字环绕排版的。
✦ 浮动的三个特点很重要。
1. 脱离文档流。
2. 向左/向右浮动直到遇到父元素或者别的浮动元素。
3. 浮动会导致父元素高度坍塌。
✦ 解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动，推荐clearfix的方式。一定要弄清楚clear清除浮动的底层原理以及clearfix的那几行代码的具体作用。
✦ BFC有自己的特征，也有触发BFC的方式，这儿就不展开太多了。
✦ IE6/7不支持BFC，也不支持:after，所以IE6/7清除浮动要靠触发hasLayout，了解下就行，毕竟IE6/7已经是历史的产物了。

作者：齐修_qixiuss
链接：https://www.jianshu.com/p/09bd5873bed4
來源：简书