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