CSS float（浮动）和清除浮动

一、float介绍

float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。简单来说，就是让block元素无视float元素，让inline元素让流水一样围绕着float元素来实现浮动布局。

二、浮动产生负作用

1、背景不能显示

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

2、边框不能撑开

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

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

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

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

1、对父级设置适合CSS高度

对父级设置适合高度样式清除浮动，这里对父元素设置一定高度即可，一般设置高度需要能确定内容高度才能设置。

使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。

2、clear:both清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加此div引入“class=“clear””样式。这样即可清除浮动。

3、父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

4.css伪元素清除浮动

.clearfix::after {
            content: "";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }