為什么“box1”和“box2”中間有一段空格？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>temo_1</title>
? ? <style type="text/css">
? ? .a1{
? ? background-color: #ccc;
? ? border: 1px solid #999;?
? ? ? ??
? ? }
? ?
? ? .box1,.box2,.box3{
? ? height: 50px;
? ? line-height: 50px;
? ? background-color: #ff9;
? ? border: 1px solid #f33;
? ? margin: 15px;
? ? padding: 0 10px;
? ? ? ? /*float: right;*/
? ? }
? ?
? ? .box1,.box2{
? ? float: left;
? ? }
? ?
? ? .p1{
? ? background-color: #fcf;
? ? border: 1px dashed #f33;
? ? padding: 0 10px;
? ?
? ? }
? ? </style>
</head>
<body>
<div class="a1">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<p class="p1">1這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，這是浮動盒子 的外圍文本，
? ? ? ? ?這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，
? ? ? ? ? 這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，這是浮動盒子的外圍文本，</p>
</div>
</body>
</html>
2021-07-13
我是這樣認為的，box1在還沒有浮動的時候是排在box2之上，所以浮動時是box1先向左浮動排在父元素a1的最左側，然后box2再向左浮動緊挨著box1，但是給box1和box2都設置了margin，所以中間會有空格。
2021-04-14
那為什么box2和box3之間沒有“空格”，是因為沒給box3設浮動，box3沒有脫離文檔流造成的嗎？
2021-03-31
box1 box2 的 margin 部分