clear清除浮动最佳实践和BFC清除浮动

浮动的三个特色很重要。

1. 脱离文档流。
2. 向左/向右浮动直到遇到父元素或者别的浮动元素。
3. 浮动会致使父元素高度坍塌。

那么clear清除浮动的最佳实践是什么呢？cleafix是最外层的div。请看以下代码：

// 现代浏览器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;
}

　　

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;
}

　　

解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动，推荐clearfix的方式。必定要弄清楚clear清除浮动的底层原理以及clearfix的那几行代码的具体做用。

浮动的适用场景有哪些？

文字环绕效果

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

文字环绕效果

页面布局

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

页面布局

多个元素内联排列

若是前文提到的，浮动能够实现相似inline-block的排列，好比菜单多个元素内联排列。但我的推荐使用inline-block。

多个元素内联排列

做者：齐修_qixiuss 连接：http://www.jianshu.com/p/09bd5873bed4 來源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。