浮动元素引起的问题和解决办法（清除浮动）

前端

• 一、浮动元素引起的问题：
  

  1.父元素的高度无法被撑开，影响与父元素统计同级的元素。
  2.如果浮动元素后面跟着非浮动的元素，非浮动的元素会紧随其后浮动起来。
  3.如果浮动元素前面还有同级元素没有浮动，那么这个元素之前的元素也需要浮动，否则会影响页面的结构。

• 二、清除浮动的方法

1.css样式clear:both
可以使用CSS中的clear:both;在最后一个浮动元素后面添加属性为clear:both;的元素，如：

<div style="clear:both;"></div>

优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2.给父元素添加clear:both;属性的:after伪元素，其实现如下：

.clearfix:after
{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix
{
    display: inline-block;
} /* for IE/Mac */

3.给父元素设置overflow属性：
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.clearfix{
    overflow: auto;
    /*overflow: hidden;也可以*/
}

4.给父元素添加浮动
但是这样父元素也会有浮动造成影响，所以最好别用。。。