最后
喜欢的话别忘了关注、点赞哦~
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
=====
方法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;
总结
阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】