css样式浮动的解决方法
1.增加一个空样式的div
.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.设置外部div的overflow属性为auto或者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.利用伪类元素来清除有浮动
<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>