标签：image bfc strip for undefined app 文档 其他 排列
浮动的三个特点很重要。
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：
? 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。
标签：image bfc strip for undefined app 文档 其他 排列
原文地址：http://www.cnblogs.com/178-533/p/7479231.html
