html中浮动的原理,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的主要特征：

BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。

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