清除浮动的方式

首先我们需要明确一个定义，什么是浮动？
元素使用float属性之后，会脱离文档流，父级元素因此失去支撑（若父级元素未设置高度），下面的元素会忽略父级元素布局,为了不影响页面布局效果，我们需要清除浮动。
清除浮动的常用方式有以下三种：
1.浮动元素的父级元素
#parent{ overflow:hidden;}
2.浮动元素的父级元素后添加伪元素
#parent ::after{ clear:both; content:' '; display:block; }
`
3.浮动元素的同级:添加一个空标签，并且给这个空标签设置 clear:both;
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

个人偏爱第二种方式，after伪元素方法清理浮动，文档结构更加清晰。