发表于： 2016-12-18 13:16:10
2 477
内容：自学几天，终于把这个东西编出来。但是发现了一些问题。通过一些修改，最终实现了效果，但是这个问题还是没搞明白。
问题：box2中的clear：right没起作用，或许是我还没理解透吧。
问题代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>九宫格</title>
<style type="text/css">
.box1{
width:100px;
height:100px;
padding:20px;
border:1px solid red;
background-color:orange;
border-radius:10px;
margin:5px;
float:left;
}
.box2{
width:100px;
height:100px;
padding:20px;
border:1px solid red;
background-color:orange;
border-radius:10px;
margin:5px;
float:left;
clear:right;
}
</style>
</head>
<body>
<div class="box1"></div><div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div><div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div><div class="box1"></div>
<div class="box2"></div>
</body>
</html>
个人理解，不知道对不对：box2先拒绝了right的强势插入，后面的box1才冲过来，这时拒绝已经失效了，只能默默承受了。
返回列表
评论