<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style type="text/css">
       .wrap::after {
    /*补全代码*/
    content:'';
    display:block;
    clear:both;
}
 .left {
    width: 100px;
    height: 100px;
    /*补全代码*/
    float:left;
}
 .right {
    width: 100px;
    height: 100px;
    /*补全代码*/
    float:left;
}
    </style>
</head>

<body>
  <div class='wrap'>
	<div class='left'></div>
	<div class='right'></div>
</div>
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>
  • 浮动
    • element {
    float: left | right | none;
}
  • left ：元素向左浮动。
  • right ：元素向右浮动。
  • none ：元素不浮动（默认值）。
  • 清除浮动
  • 清除浮动是一种技术，用于解决浮动元素导致的布局问题。
  • 使用 clear 属性 ：在浮动元素之后添加一个清除浮动的元素，使用 clear 属性来清除浮动。
  • <div style="clear: both;"></div>
  • 使用伪元素 ：通过在父容器上使用伪元素 ::after 来清除浮动。
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
  • 使用 overflow 属性 ：为父容器设置 overflow 属性为 auto 或 hidden，可以自动清除浮动。
.container {
    overflow: auto;
}
  • 使用 display: flow-root ：这是 CSS 的一种新特性，可以将父容器的显示类型设置为 flow-root，从而自动清除浮动。
.container {
    display: flow-root;
}