如何解决因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.知乎