浮动的三个特点很重要。
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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。