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

Posted 2020-10-05

浮动的三个特点很重要。

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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。