1.clear 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生影响 clear： 作用：清除浮动元素对当前元素所产生的影响 可选值： left：清除左侧浮动元素对当前元素的影响 right：清除右侧浮动元素对当前元素的影响 both：清除两侧中最大影响的那侧 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
2.after伪类解决高度塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ border: 5px solid red; } .box2{ width: 100px; height: 100px; background-color: #bfa; float: left; } .box1::after{ content: ""; clear: both; display: block; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>3.clearfix clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，可以直接使用clearfix
.clearfix::before, .clearfix::after{ content:''; display:table; clear:both; }