浮动

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

浮动特征

浮动会脱离文档

脱离文档，也就是说浮动不会影响普通元素的布局

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

浮动可以内联排列

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。

从上图可以看出，对多个元素设置浮动，可以实现类似inline-block的效果；但是如果每个元素的高度不一致，会出现“卡住”的情况。

浮动会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

// css
 .box-wrapper {
        border: 5px solid red;    
}
  .box-wrapper .box {
        float: left; 
        width: 100px; 
        height: 100px; 
        margin: 20px; 
        background-color: green;    
}

// html
    <div class="box-wrapper">    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div>
    

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

清除浮动

• clear清除浮动
• BFC清除浮动

clear清除浮动

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

注意：我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

//clear清除浮动例子
    <div class="box-wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div style="clear:both;"></div>
    </div>

不要在浮动元素上清除浮动

//第三个元素加上clear:both
    <div class="box-wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box" style="clear:both;"></div>
    </div>

注意：给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。

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

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
    .clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

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

• float 为 left | right
• overflow 为 hidden | auto | scorll
• display 为 table-cell | table-caption | inline-block | flex | inline-flex
• position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。