未加float代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/c.css" rel="stylesheet">
<title>c01</title>
</head>
<body>
<div class="div1">大</div>
<div class="div2">小</div>
</body>
</html>
css部分
.div1{
background-color:red;
width:20%;
/* float:left; */
}
.div2{
background-color:Green;
width:80%
/* float:left; */
}
加上
float效果
最后再看一個效果
下面是代碼：
<div class="f1">
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="cle"></div>
</div>
css部分
.f1{
margin-top:10px;
border:1px solid red;
width:300px;
}
.c1{
border:1px solid green;
height:30px;
width:96px;
float:left;
}
.cle{
clear:both;
}
這個可以實現(xiàn)一個外邊框紅色刀崖，內(nèi)邊框綠色的效果。
