说到底就是清除浮动么
1-1 概念及原因
1、父盒子内部的元素跑到了外部
2、 为什么会出现盒子塌陷?
- 当父元素没设置足够大小时,而子元素添加了浮动属性,子元素就会跳出父元素的边界(脱离文档流)
- 当父元素的高度为auto时,而父元素中又没有其他非浮动的可见元素时,父盒子的高度直接塌陷为0,称: CSS高度塌陷
1-2 盒子塌陷的几种解决方法:
1、 盒子大小写死,给每个盒子设定固定的width和height
2、 父盒子添加overflow属性
- overflow: auto,可能出现滚动条
- overflow: hidden,可能带来内容不可见的问题
3、 父盒子最下方引入清除浮动块
<br style="clear:both;">
4、 after伪元素清除浮动
- 外部盒子的最下面设置clear属性,再隐藏它
- 不用引入冗杂元素
.clearfix {
*zoom: 1;
}
.clearfix::after{
display: block; /* 插入伪元素是行内元素,要转换为块级元素*/
height: 0;
visibility: hidden; /*content有内容,将元素隐藏*/
content: "";
clear: both;
}
5、 使用before和after双伪元素清除浮动
.clearfix::before,.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}