float 属性最初用于在成块的文本内浮动图像，但现在它已成为在网页上创建多列布局的最常用工具之一

一、Float 布局的基本规则

浮动布局的规则

左/右浮动的盒子，将向左/右移动，直到它的 margin 碰到包含块的 content box 边缘 或者 兄弟浮动盒子的 margin
浮动盒子会脱离文档流
- 即父元素的高度计算不会包含浮动的子元素的高度
- 所谓的高度坍塌

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

二、解决高度坍塌

在父元素末尾添加清除浮动的块级元素

  <div class="container">
    <div class="float"></div>
    <div style="clear: both;"></div>
  </div>

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

<div class="container clearfix">
  <div class="float"></div>
</div>

.container {
  overflow: hidden; /* 触发 BFC */
}

  <div class="container">
    <div class="float"></div>
  </div>