- 手动给父元素添加高度
- 通过clear清除内部和外部浮动
- 给父元素添加overfloat属性并结合zoom:1使用
- 给父元素添加浮动
常用方法:
①```给兄弟元素添加clear属性:添加一个class为clear:both,
②```添加伪类:.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容;
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;
height: 0; <----高度为0;
font-size:0; <----字体大小为0;
}
③'''给父元素添加after伪类
.clearfix::before,
.clearfix::after{
content: ".";display: block; height: 0;overflow: hidden;
}
.clearfix:after{
clear: both;
}
.clearfix {
zoom: 1; /* IE < 8 */
}
④`````给外层div加.clearfix:after {visibility: hidden; 和display的区别 前者隐藏行列还占据空间 display: block; 必须写 font-size: 0;
content: " "; 必须写
clear: both; 必须写
height: 0; 必须写
}