前端的学习之路：初级CSS---clearfix
程序员文章站
2022-05-10 11:03:25
...
clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clearfix</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.21.07.css"> -->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
/*
.box1::before{
content:'';
display:table;
}
*/
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
/*
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，
当你遇到这些问题时，直接使用clearfix
*/
/* .clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
} */
.clearfix::before,
.clearfix::after {
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
运行结果为：
上一篇： Android RxPermissions 动态权限申请
下一篇： python学习部分