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