CSS中的浮动原理和清除浮动

浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

被浮动的元素可以内联排列。

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

清除浮动

主要有两种方式：分别是clear清除浮动和BFC清除浮动

1. clear清除浮动

clear:both 不允许元素的左边或右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。

2. 利用伪元素清除浮动（现代浏览器clearfix方案，最佳实践方案）

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

// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 最佳实践方案
// 加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

注： 加入:before是为了解决现代浏览器上边距折叠的问题

3. BFC容器清除浮动

BFC(Block Formatting Context)既块状格式化上下文，它是按照块级盒子布局的。

BFC的主要特征：

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

BFC的触发方式

// 给父元素添加以下属性来触发BFC
1. float: left | right
2. overflow: hidden | auto | scorll
3. display: table-cell | table-caption | inline-block | flex | inline-flex
4. position: absolute | fixed