为什么要清除浮动?
- 浮动的元素撑不开父盒子,影响父元素与其同级元素;
- 影响与浮动元素同级的非浮动元素;在视觉上,浮动元素会覆盖在非浮动元素之上(即脱离标准流);
- 如与浮动元素同级的第一个元素是非浮动的,则会影响页面的显示结构;
如何清除浮动?
- 在浮动元素后面添加一个有
{clear: both;}
属性的div标签
; - 给浮动元素的
容器
添加overflow: hidden;
样式; - 给浮动元素的
容器
的class类
添加伪元素.clearFix:after {content: '.'; height: 0; line-height: 0;visibility: hidden; clear: both;}
(推荐)