关于清除浮动的几种解决方法

一、浮动产生原因

      浮动的产生是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题。

二、浮动产生负作用

1、背景不能显示

     由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

     如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

     由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三、CSS解决浮动，清除浮动方法 

首先举个小例子（代码如下图：我自己把敲好的展示出来）

（ 当子元素都设置了float属性，父元素div宽度高度不能撑开，样式margin属性显示有问题 ）

    运行结果如下图

（结果如图）

 解决方法一：添加额外标签、应用 clear：both；（如下图）

（ 注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱. ）

      运行结果如下图

 解决方法二:父级div定义 overflow: auto（注意：是父级div也就是这里的  div.box）(如下图)

（如上图标注详解）

      (原理:使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。)

  结果父元素div宽度高度充满（结果就是方法一的结果）

 方法三： 使用伪元素:after,来清除浮动(注意：作用于浮动元素的父亲）

     （主要推荐使用这种方法清除浮动）如下图

（其中不加visibility:hidden）也可以）

  结果父元素div宽度高度充满（结果就是方法一的结果）

方法四:使用双伪元素清除浮动

如下图

（方法四）

（今天某朋友问我清除浮动怎么清除，因为她刚学代码不久，我就让她用了第一种方法，今天晚上我就想到总结一下。巩固一下）

作者：懿左左
链接：https://www.jianshu.com/p/a06d025c7436