案例解析:
非浮动布局时,包裹元素高度自适应 。
若给p标签增加浮动属性: 包裹元素高度为0,出现高度塌陷问题。在实际应用中,这并不是我们想要的效果,这时就需要清除浮动,即闭合浮动元素
解决办法:
方法1:为包裹元素追加一个内容为空的元素,设置clear: both属性
这种方法通俗易懂,但添加了无意义的空标签,违背了结构和表现分离的原则 ,对于后续维护不友好。
方法2:为包裹元素增加overflow: auto/hidden属性
增加overflow属性,浮动元素会回到容器层,将容器高度撑开,达到清除浮动的效果。
方法3:为包裹元素设置浮动属性
给浮动元素的包裹元素添加浮动属性,能达到清除浮动的效果。但包裹元素整体浮动,若该包裹元素外层还有其他元素,则会影响整个页面的布局。
方法4(推荐):使用after伪元素
原理同方法1,在元素末尾添加一个看不见的块状元素来清除浮动。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
方法5(优化):只要促发BFC,就能清除浮动,以上方法都是触发了BFC
dispaly: table;不需要再设置其他样式去隐藏content, 创建了匿名的表格单元,可促发BFC
.clearfix:after {
content: " ";
display: table;
clear: both;
}
也可以这么写。加上before对于清除浮动没有必要, 但可以避免浏览器顶部的空白崩溃(margin-top和上一个盒子的margin-bottom会发生重叠)。若不需要防止这种margin叠加,可以去掉before。
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
最后:
flex布局能够替代浮动布局。
与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!