盒子模型中的浮动属性

一,什么是浮动

浮动就是让元素脱离文档流。

属性：1，float：left；元素靠左边浮动。

2，float：right：元素靠右浮动。

3，float:none:元素不浮动。

特点：元素脱离文档流之后，就不会占据文档流位置，下面的元素会自动上移

设置浮动后，它不会超过它前面的元素

浮动以后，块元素和行内元素特性也会发生变化，块元素不会独占一行，行内元素也可以设置宽高了。

浮动会“见缝插针”

浮动的元素，默认情况下，不会超过其父元素

作用：定义网页中其他文本如何环绕该元素显示

让竖着的元素横着来，就是垂直布局可以变成水平方向布局

二，清除浮动

什么是清除浮动？

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

怎么清除：

1，使用清浮动属性，clear：none 允许有浮动对象

                                   clear:left-right  不允许左右有浮动

                                   clear:both    不允许有浮动对象

2，给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，启动元素隐藏属性BFC，这种方式是副作用相对较小的，对布局有很大好处。

3，给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

4，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

拓展:什么是BFC,全称Block formatting context，就是块格式化上下文，css中隐藏属性，开启后，该元素就会成为一个独立的布局区域。

       开启特点；开启BFC后的元素，不会被浮动元素覆盖，

                         开启BFC后的元素，子元素和父元素外边距不会重叠

                         开启BFC后的元素，可以包含浮动的子元素，通常这一原理解决元素的高度塌陷。

***高度塌陷：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

总结：很多方法会触发BFC,慢慢理解，慢慢消化，任重而道远，且行且努力！