清除float带来的浮动流

前言：在前端的道路上，能解决一个问题老夫就来分享一波。。。

以前float是用于排版写报纸那样的格式的，但随着前端工程师精益求精的精神，开发出很多新的玩法，当然也出现很多的坑，这里就来解决一下如何清除浮动流的问题。。

如果一个标签元素，被float修饰后，就会产生浮动流，块级元素将看不到它，但文本类元素¹还有文本仍然会看见。
如何才能让块级元素被看到呢？这里就需要清除浮动流，清除浮动流有很多办法，但最好的办法是使用伪元素来解决。。。

div::after{
content:"";
display:block;
clear:both;
}

---

注意： 伪元素都是行级元素，但`clear`属性只存在于块级元素中，还有`content`是比不可少的。。

---

1. 文本类元素指的是含有inline属性的，比如img和span都是文本类元素。。 ↩︎