這個出來的效果第三個div中的文字為什么不會跟著div動，且第三個div被第一個覆蓋后會偏上呢
<html>
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style type="text/css">
.box1{
background: red;
width: 80px;
height: 30px;
border: 10px solid;
padding: 20px;
margin: 20px;
float: left;
}.box2{
background: red;
width: 80px;
height: 30px;
border: 10px solid;
padding: 20px;
margin: 20px;
float: left;
}
.box3{
background: red;
width: 80px;
height: 30px;
border: 10px solid ;
padding: 20px ;
margin: 20px ;
}
</style>
</head>
<body>
<div class="box1">
第一個box
</div>
<div class="box2">
第二個box
</div>
<div class="box3">
第三個box
</div>
</body>
</html>
結果如圖：
第三個盒子的文字為什么不隨著div動呢？且第三個div被第一個覆蓋后會偏上呢？
2017-04-07
box3默認是流動模型，從頁面第一行開始展開并且獨占一行；box1和box2是浮動模型，浮動在頁面左上角，但同時會覆蓋box3的部分內容。box3為了避免其文字內容被覆蓋，會把文字向右移動顯示，但是受box3的寬度限制，只能寫在下方，就造成了你的結果。
你把box3的寬度設置大一些，看看效果就明白了
2017-05-27
.box3{
background: red;
width: 80px;
height: 30px;
border: 10px solid ;
padding: 20px ;
margin: 20px ;
float:left;
}
你掉了一行代碼。最后一行，加上就可以了
2017-04-07
第一二個是浮動布局，默認為同一層級，并且沒有設置具體邊界，就從左上開始堆疊了。所以平鋪向右不會沖突，第三個沒有寫明布局方式，默認為流布局。流布局的邊界布局優(yōu)先級高一點，直接擠在了浮動布局的前面。所以box3的邊界一變，下面的兩個都會變，至于文字會被覆蓋，那是因為可以放置文字的空間太小溢出了，你把padding加大一點試試，文字就正常了。
2017-04-07
是不是第三個div少了
這一行代碼？
2017-04-07
因為第三個div受到了第二個div浮動屬性的影響