3-4编程练习
来源：3-4 编程练习
ludiwg
2018-06-19 11:34:24
为什么我把clear的class放到第一行（前三个）和第二行（后三个）中间去清除浮动，按道理应该两行都被清除，为什么还是会高度塌陷？
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:800px;
border:1px lightgray solid;
}
.box{
float:left;
border:1px lightgray solid;
margin:8px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<br>
欢迎来到慕课网学习新知识!
</div>
<div class="box">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<br>
欢迎来到慕课网学习新知识!
</div>
<div class="box">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<br>
欢迎来到慕课网学习新知识!
</div>
<div class="clear"></div>
<div class="box">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<br>
欢迎来到慕课网学习新知识!
</div>
<div class="box">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<br>
欢迎来到慕课网学习新知识!
</div>
<div class="box">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<br>
欢迎来到慕课网学习新知识!
</div>
<!--<div class="clear"></div>-->
</div>
</body>
</html>
1回答
-
clear:both;是清除左浮动和右浮动，你放在第一行（前三个）后面会清除前三个的左右浮动，而后三个不会清除，所以你需要放到下图位置去清除，clear:both;是清除左浮动和右浮动，而不是左边的和右边的都会清除浮动。祝学习愉快~
0h018-07-03
相似问题