浮动

概念

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

优点

• 使文字环绕在图片周围。
• 当元素浮动后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

浮动元素一旦脱离了文档流，就无法撑起父元素，会导致父元素高度坍塌。

父元素只包含浮动元素，那么它的高度变为 0（前提就是你们没有设置高度（height）属性，或者设置了为 auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到）

解决方案

• 给外部盒子也添加浮动。把外部盒子也从标准文档流中抽离。 缺点：可读性差，不易于维护（外人看不懂），而且可能要调整整个页面布局。

• 在外部盒子内最下方添上带 clear 属性的空盒子。可以是 div 也可以是其它块级元素，把 放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。 缺点：引入了冗余元素

• 用 overflow：hidden 清除浮动。属性触发 BFC，让内层的 float 不会影响外层的布局。 缺点：有可能造成溢出元素不可见。

• 直接给父元素设置宽高

• 用 after 伪元素清除浮动。给外层盒子的 after 伪元素设置 clear 属性，再隐藏它。

  //在css中添加:after伪元素
  .parent:after{
      /* 设置添加子元素的内容是空 */
        content: '';  
        /* 设置添加子元素为块级元素 */
        display: block;
        /* 设置添加的子元素的高度0 */
        height: 0;
        /* 设置添加子元素看不见 */
        visibility: hidden;
        /* 设置clear：both */
        clear: both;
  }