如何解决因float带来的排版问题？

浮动造成的常见问题有哪些？

兄弟元素排版错乱

• 内联元素（行内元素）
  如果该兄弟元素是内联元素，内联元素会尽可能的围绕在浮动元素的周围
  

• 块级元素
  如果该兄弟元素是块等元素，块级元素会无视浮动元素，并且一定程度的覆盖浮动元素，
  文本是属于行内匿名元素，所以会浮动在内联元素周围，实际div已经尝试了覆盖
  会在元素换行上有疑问，或许你还会想着通过宽度来解决这个换行问题
  

父元素塌陷问题

因为元素浮动，和未浮动的父元素不在同一个文档流当中，浮动的元素不能撑起来父元素的高度

为什么会造成这种现象？

使用用浮动会让元素脱离普通流，完成各种定位的同时，会带来了许多后遗症

如何解决浮动带来的问题？

方法一：clear：both

• 含义
  不允许改元素的两边有浮动的元素

• 使用情况
  更适合用于需要换行，却因浮动换行失败的情况

• 空div是什么个意思？
  换行也存在两种可能性，一种是他紧邻的兄弟元素要换行，那再这个元素上直接添加clear:both就好，
  还有一种是这个元素接下来的元素都要换行，那么我们就悄悄的呢添加一个其实没有任何意义的div，写上一个类，里面有clear:both;
  还要有height:或者0 line-height: 0;要不然会换行了背景还是会塌陷

方法二：overflow：hidden/auto

• 含义
  overflow 属性规定当内容溢出元素框时发生的事情。
  hidden 内容会被修剪，并且其余内容是不可见的。
  auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  auto对seo较为友好

• 使用情况
  float造成的盒子塌陷

• 为什么不是裁剪跨出边界的元素，反而是撑高？
  牵涉到BFC机制，overflow:hidden 的意思是超出的部分要裁切隐藏掉，
  那么如果float 的元素不占普通流位置普通流的包含块要根据内容高度裁切隐藏，
  如果高度是默认值auto那么不计算其内浮动元素高度就裁切就有可能会裁掉float，
  这是反布局常识的， 所以如果没有明确设定容器高情况下它要计算内容全部高度才能确定在什么位置， hidden浮动的高度就要被计算进去顺带达成了清理浮动的目标。
  简单说就是overflow会开启一个计算高度的机制，而这个机制的计算包括float

• 兼容性
  IE6 中需要触发 hasLayout ——为父元素设置容器宽高或设置 zoom：1

方法三：:after伪元素法(兼容性各方面综合最佳)

• 含义
  after 选择器在被选元素的内容后面插入内容。
  用 content 属性来指定要插入的内容。有点贵像空div的高级版

• 写法一

<style>
        .clearfix {/* 触发 hasLayout */ zoom: 1; }
        .clearfix:after {
         content: "";
         display: block; height: 0; 
         clear: both; visibility: hidden; }
    </style>
     <div class="wrap ">
        <div class="pic1">div-float:left</div>
        <div class="pic3">div-float:left</div>
        <div class="pic4">div-float:left</div>
        <div class="pic2">div-无float</div>
    </div>
    <div>第二个大盒子</div>

• 写法二

 .clearfix:before, .clearfix:after {
       content:"";
       display:table;
   }
   .clearfix:after{
       clear:both;
       overflow:hidden;
   }
   .clearfix{
       zoom:1;
   }

• 解析
  用after:伪元素在需要清除浮动的大盒子外边添加了一个看不见（visibility）但是有高度（高度为0）的空内容块。
  visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来。
  display:table,这个元素的作用就像 <table> 元素.
  它定义了一个块级盒子.有两个特性同行等高,宽度自动调节。

参考资料

1.kayo博客
2.知乎