- 效果图
![](https://i-blog.csdnimg.cn/blog_migrate/e3e4750892d1560bc3a0154beeff2e5e.png)
- HTML 代码
<div class="box blueXian">
<div class="left xian">
左边
</div>
<div class="right xian">
右边
</div>
</div>
- CSS 代码
.box{
width: 1200px;
margin: 100px auto;
/*height: 400px;*/
}
.xian{
border: 1px solid red;
}
.blueXian{
border: 1px solid blue;
}
/*浮动*/
.box .left{
width: 550px;
height: 400px;
float: left;
}
.box .right{
width: 550px;
height: 400px;
float: right;
}
.box::after{ /*清除浮动*/
content: "";
display: block;
clear: both;
}