清除浮动的方式:
1. 定高法: 直接给父元素设置高度height
应用: 适合用于高度写死的部分。比如网站的头部模块
弊端: 高度写死,不利于页面后期维护 ;
2. overflow:hidden ; 给父元素添加 overflow:hidden
弊端: 定位溢出的元素会被隐藏
3. 额外标签法 :
在浮动元素的最后边,添加一个空的标签 <div class='clear'></div>;
并且给该标签添加 {clear:both}
注意点: 添加的空标签和 浮动元素是兄弟关系
弊端: 破坏文档结构
4. 伪元素 :after 推荐使用
给父元素添加指定的类名 .clearfix
.clearfix:after{
content:'.';
height:0;
visibility:hidden;
display:block;
clear:both;
}
clear:both; 元素左右两边都不允许出现浮动的元素