CSS之浮动

什么是浮动

浮动，有两个特点， 一是浮，即浮出正常文档流之外，脱离了正常文档流，其主要表现在将元素设置为浮动后，父元素高度将塌陷（在没有其他子元素的情况下）。 二是动，浮动的元素是有方向的。

浮动的使用场景

• 文字环绕
  浮动最初出现的目的就是实现文字环绕效果，所以这是最基本的作用。

• 内联排列
  浮动元素会左（右）浮动，直到碰到其他的浮动元素，这里的碰到指的是其他浮动元素的padding，作用类似与inline-block,但inline-block在此情况下更推荐--inline-block没有脱离正常文档流，元素之间存在间隔。
  
  

---

清除浮动

原因

1.浮动元素脱离正常文档流会导致父元素高度坍塌。
2.在文字环绕场景中，会导致脚注跟随在正文后面，需要清除浮动把它固定在页底

方式

1.clear清除浮动
clear属性规定元素的哪一侧不允许其他浮动元素，正因为如此，clear不会在浮动元素上，clear属性会给clear元素的上外边距之上添加清除空间，clear元素会将前面的元素顶到上面，故将父元素高度撑了起来

2.BFC清除浮动。
BFC，块级格式上下文，因为BFC计算高度时会将浮动元素的高度计算进去，我们可以利用此特性来将父元素的高度撑开。
触发BFC的条件

* float的值不为none;
* overflow的值不为visible;
* position的值为fixed/absolute;
* display的值为table-cell/table-caption/inline-block/flex/inline-flex

优化

.clearfix:after{
    content:"";
    display:block;//clear适用于块元素
    clear:both;
    height:0; //元素不占据任何高度
    visibility:hideden; //隐藏content
}