清除浮动-双伪元素清除浮动(HTML、CSS)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动-双伪元素清除浮动</title><style>.clear::before,.clearfix:after {content: "";display: block;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style></head><body><div class="box clearfix"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>