本文介绍了一种使用CSS实现元素浮动及清除浮动影响的方法。通过`.box`类设置背景颜色和宽度，`.box2`类中使用`clear:both`属性来清除浮动影响，确保页面布局正确显示。此外还介绍了使用`:before`和`:after`伪元素结合`clearfix`类解决高度塌陷和外边距重合问题。
Document
.box{
width:500px;
background-color: darkcyan;
}
.box1{
width:200px;
height:600px;
background-color: darkorchid;
margin-top:200px;
}
.box2{
width:200px;
height:200px;
background-color: darksalmon;
clear:both;
/* clear:left; 清除左浮动的影响。
clear:right; 清除右浮动的影响。
clear:both; 清除对自己影响最大的那个浮动。
*/
}
.clearfix::before,
.clearfix::after{
content:'';
display: table;
clear: both;
}
/* 利用clearfix类可以解决高度塌陷和外边距重合问题 */
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
