1. 浮动

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

浮动的设计初衷是实现图片或块级元素的文字环绕效果。

浮动的特征：

• 脱离文档流 —— 导致父元素高度塌陷
• 包裹性(触发了 BFC) —— 对外表现类似 inline-block，可设置宽高，但浮动元素间没有 inline-block 间隙

2. 清除浮动

清除浮动是为了解决父元素高度坍塌问题。

网上给出的清除浮动方法很多，但原理无非三类：父元素设置高度、clear、BFC。

父元素设置高度 显然能解决高度坍塌。

那么 clear、BFC 为何能解决高度坍塌呢？

clear清除浮动

clear 清除浮动的原理：clear 属性不允许被清除浮动元素的左/右边挨着浮动元素；底层原理： 在被清除浮动的元素上边或者下边添加足够的清除空间，从何解决父元素高度坍塌。

clear 清除浮动的方法：父元素添加 class="clearfix"

    // 全浏览器通用 clearfix 方案
    // 引入 zoom（触发IE的hasLayout，代表该元素有自己的布局）以支持 IE6/7
    // 加入 ::before 创建BFC以解决现代浏览器相邻元素上下 margin 重叠问题
    .clearfix::before,
    .clearfix::after {
        display: table;     // 创建BFC
        content: " ";
    }
    .clearfix::after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;   // 触发IE的hasLayout，值为1时，代表使用元素的实际尺寸
    }

BFC清除浮动

BFC块级格式化上下文，是一个独立的渲染区域。了解更多参见 本博客 BFC知多少

BFC清除浮动的原理是：BFC其中一个布局规则是，计算BFC高度时，浮动元素也参与计算。实质上可以理解为，给浮动元素的父元素设置BFC，即可消除子元素浮动对父元素造成的高度塌陷问题。

    <div style="overflow: hidden;">
        <div style="float: left;">浮动的子元素</div>
        <div>正常子元素</div>
    </div>

分析：

https://www.jianshu.com/p/09bd5873bed4

https://sanyuan0704.github.io/frontend_daily_question/week01/006.html#%E4%BC%98%E7%82%B9

https://blog.csdn.net/sinat_36422236/article/details/88763187