方法一:额外标签法(隔墙法)
在父亲盒子中新增一个盒子,并且在style标签中给新盒子写上"clear:both;",即可。
.clear {
clear: both;
}
方法二:父级overflow:hidden
只需要在父亲盒子中加入一段代码"overflow: hidden;",即可。
下面展示一些 `内联代码片`。
.box {
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
方法三:父级after伪元素(见代码)
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
方法四:父级双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}