Solution floating css styles
1. Add an empty div style
.clearfix{
clear: both;
}
</style>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="clearfix"></div>
<div class="box3">div3</div>
</body>
2. Set the external div overflow property to auto or hidden
<style>
.box{
background-color: yellow;
overflow:atuo; //或者是hidden
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
3. using the pseudo floating-earth element to clear
<style>
.clearfix:after{
content:"";
display:table;
height:0;
visibility:both;
clear:both;
}
.clearfix{
*zoom:1; /* IE/7/6*/
}
</style>
<body>
<div class="box clearfix">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>