CSS布局模型 之 浮动模型（浮动的工做原理和清除浮动技巧？）

浮动的工做原理

浮动是让某元素脱离文档流，在浮动框以前和以后的非定位元素会当它不存在同样，可能沿着它的另外一侧垂直流动，但都为其腾出空间，块级元素也不例外（被浮动元素占据了部分行空间的块级元素，仍然被看做是占据了一整行，只不过是被浮动元素占据的那部分空间没法利用罢了）。

浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止；若是当前线上的水平空间不足，它将逐行向下移动，直到有空间为止（因此浮动元素不会影响页面上方布局）。任何元素均可以浮动，浮动元素会生成一个块级框（拥有块级元素特性，但不占整行），而不论它自己是何种元素。

另外由于浮动元素脱离了文档流，全部它没法为其文档流中的父级元素撑起高度。

清除浮动技巧

   一、clear清除浮动

left    在左侧不容许浮动元素。

right在右侧不容许浮动元素。

both在左右两侧均不容许浮动元素。

none默认值。容许浮动元素出如今两侧。

在 CSS1 和 CSS2 中，这是经过自动为清除元素（即设置了 clear 属性的元素）增长上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增长清除空间，而外边距自己并不改变。不论哪种改变，最终结果都同样。例如：若是声明为左边清除，会使元素的上外边框边界恰好在左边浮动元素的下外边距边界之下。

要注意了，咱们是经过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。浮动元素脱离了文档流，就算为其加了清除空间，也影响不了父元素的高度，最多能让其某侧不容许其余浮动元素。

clear 只能做用与块级元素或浮动元素，不过上面已经说了做用于浮动元素的弊端，因此通常都是使用块级元素。

全浏览器通用的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

 

参考文献：http://www.jianshu.com/p/09bd5873bed4

   https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-float 

     PS:若是对你有帮助，就顺手点个赞吧~