css 清除浮动

css3中，关于 “浮动” 和 “清除浮动” 的那些事!

在css3中，当我们布局一个元素使它浮动的时候，我们常常会用到float（浮动）属性，使其元素左浮动、右浮动或者两端浮动，等。但是当我们定义了浮动属性之后，如果我们想要清除浮动，那该怎么办呢？

---

一、浮动的特性

脱离文档流，会根据父容器进行向左或者向右排列，如果之前有浮动的元素，就会挨着浮动的元素进行排列。

①浮动的逼格

1. 只会影响浮动后面的元素
2. 换行排列
3. 内容会提升半层级别
4. 默认宽根据内容而定
5. 浮动后，块级元素看不到，行级元素能看到。

当我们定义三个div 块的时候，因为它是块级元素，每个元素会独占一行空间，定义完以后是纵向排列的元素。

浮动前：

浮动后：

该元素就会在原文档流中解除，不占用文档流空间，浮在文档流最上方。

---

②浮动的属性

float 默认为不浮动，属性值：none

---

二、清除浮动

①清除浮动的概念

    有时候当我们设置了浮动以后，会影响到下面不理想的一些样式布局，但是如果我们既想浮动元素而且还不影响下面的布局，我们就会用到清除浮动，来实现这种情况。

---

②清除浮动的方式及属性

清除浮动的办法有clear、overflow、after伪元素清除浮动等等几种方式。

1. 使用clear属性清除浮动属性如下：
   

2. 使用overflow属性清除浮动属性如下
   

3. 使用after伪元素清除浮动

目前比较常用伪元素来清除浮动

 .clear::after{
            content: "";
            display: block;
            clear: both;
            visibility: hidden;
       }

清除浮动前后的效果对比如图：
当清除浮动后，子元素会脱离文档流，导致了父元素的高度塌陷问题！
解决这种办法就是给元素清除浮动。
清除浮动后

---

小白水平，如有解释不全，多多讨论指正.
谢谢!