css浮动清除

1. 什么是浮动

当元素的 float 属性不为 none 时就产生了浮动。

2. 浮动影响

1. 浮动元素的外边距不会合并。
2. 浮动非替换元素时必须设定宽度。
3. 浮动元素会脱离文档流但不会脱离文本流，因而会造成文本环绕效果，而这也是浮动的本意。
4. 不管是块级元素还是内联元素，一旦浮动就会变成行内块元素（即display: inline-block;）
5. 如果浮动元素应用了负外边距而导致其与相邻元素重叠，分两种情况：

• 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示。
• 块框与一个浮动元素重叠时，其边框和背景都在该浮动元素之下显示，而内容在浮动元素之上显示。

3.清除浮动

上面提到过浮动元素是不具备高度的，因此会造成父元素高度塌陷，可以通过以下方法来清除浮动。不仅要知道什么方式可以清除浮动，更要知道这些方法是如何清除浮动的。

1.浮动父元素

CSS 2.1中提到了浮动的一个特性：浮动元素会延伸，从而包含其所有后代元素。但这有点拆了东墙补西墙的意味，不推荐。
应用对象：父元素

2.overflow属性

overflow 属性本意是规定了当内容溢出元素框时发生的事情。但当其属性值为hidden或auto时，它会自动的清理包含的任何浮动元素，也就意味着它是认可浮动元素的高度的。但在某些情况下，使用该方法会产生滚动条或截断内容。所以使用时需谨慎。
应用对象：父元素

3.clear属性

clear属性会给该元素添加足够的外边距，从而达到清除浮动的效果。clear 属性的值可以是：left、right、both或none。
应用对象：相邻元素
4.伪元素
在没有现成元素可以应用clear属性时，我们可以使用伪元素：

 .clearfix::after {
    content: '';
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

注：after 会在元素内容后面而不是元素后面插入一个伪元素。
应用对象：父元素

5.空元素

当然，我们也可以直接在浮动元素后面添加一个空元素，如下：

同样可以达到清除浮动的效果，但会增加不必要的代码，不推荐。