css浮动样式（float）or清除浮动

首先我们了解一下浮动所具有的特性：

①：包裹性

②：块状化并格式化上下文

③：破坏文档流

一、所谓包裹性就是由“包裹”和“自适应性”两部分组成。

（1）包裹：假设在一个比较大的盒子里有一张相对比较小的图片，此时使用浮动就会出现所谓的包裹；例如：在一个宽200px的div里面放了一张宽100px的图片，对图片也就是子元素使用float浮动，则此时就会发现浮动的元素宽度变现为“包裹”，就是里面图片的宽度100px。

(2)自适应：如果浮动的不只是这张100px的图片，还有一些普通文字；此时浮动元素宽度就会自适应父元素的宽度。

当然如果上面的文字是一长串英文而且没有空格隔开，那么就会发生一些很神奇的问题，那就是浮动元素宽度会被这一长串英文给撑大，因为浏览器会将你的这一长串英文认作为一个单词，既然是一个单词那就说明是一个整体。

二、块状化指的就是在float的属性值不为none，则其display的值就会是block或table，这个时候就不要想用text-align来控制浮动元素实现对齐方式了，因为text-align对块级元素是无效的。

三、破坏文档流，这个是重点，因为一般用浮动都是将元素浮动到自己想要的位置，但是这个时候你会发现你自己的文档会出现一些意想不到的问题。

就像你对子元素进行浮动，但父元素没有进行浮动，然后你又对浮动元素设置了外边距，这个时候你就会发现父级元素跟着一起下来了，这就是高度塌陷，有这些问题的出现就有了“加了浮动后紧跟着要清除浮动”这样一句话。

下面就是清除浮动的一些方法：

①在浮动元素后使用一个空元素赋予clear:both;

②给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

③什么都不做，给浮动元素后面的元素添加clear属性。

④用after 伪元素实现元素末尾添加一个看不见的块元素