<style>
div{
width:100px;
height:100px;
border:1px solid red;
background-color:pink;
float:left
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
清除浮动的方法
1.设置clear:both
div{
width:100px;
height:100px;
border:1px solid red;
background-color:pink;
float:left;
clear:both
}
2.在最后一个浮动标签后新增一个标签，给其设置clear:both
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div style="clear:both"></div>
</div>
3.父元素添加overflow:hidden
<style>
.father{
border:1px solid blue;
overflow:hidden
}
.child{
width:100px;
height:100px;
border:1px solid red;
background-color:pink;
float:left;
}
</style>
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
4.父元素添加：after伪类
<style>
.father{
border:1px solid blue;
}
.father:after{
content:'';
display:block;
clear:both;
}
.child{
width:100px;
height:100px;
border:1px solid red;
background-color:pink;
float:left;
}
</style>
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
5.父元素添加display:table
<style>
.father{
border:1px solid blue;
display:table
}
.child{
width:100px;
height:100px;
border:1px solid red;
background-color:pink;
float:left;
}
</style>
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
