说一下CSS浮动

什么是CSS浮动：

特点：

浮动可以使元素脱离文档流，不占用位置。可以将元素转换为行内块元素。

作用：

设置浮动的图片，可以实现文字环绕图片的效果。

设置浮动的块级元素可以排列在同一行，

设置了浮动的行内元素可以设置宽高，可以按照浮动设置的方向对齐排列。

影响：

脱离文档流后，父级盒子没有设置高度会塌陷，父级元素的后面兄弟元素会跟着受到影响。浮动元素的后面兄弟元素也会收到影响。

清除浮动方法：

· 伪元素清除浮动：给浮动元素父级增加。

 .clearfix::after {
     content: ''; display: table; clear: both;
  }
 /*兼容IE低版本 */
 .clearfix {
     *zoom: 1;
 }
 

· overflow：hidden：给浮动元素父级增加overflow：hidden属性。
· 额外标签法：给浮动元素父级增加标签。

<div class="wrap">
  <div class='left fl'></div>
  <div class='right fl'></div>
  <div style='clear:both'></div>
</div>

三种清除浮动的特点和影响

· 伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法。

· overflow：hidden：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁。

· 标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用。