                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

代碼里第三個盒子怎么沒有邊框了？如果有三個盒子，中間的盒子浮動，是跟第一個同行還是跟第三個同行？

hzsu

2016-02-26

源自：初識HTML(5)+CSS(3)-升級版 13-4

關注問題我要回答

1165

操作

收起

2 回答

黑子Kuroko 回答被采納 +3 積分
2016-02-26

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>浮動模型</title>
<style?type="text/css">
div{
	border:2px?red?solid;
????width:200px;
????height:400px;
	
}
#div2{
	/*此處將div2的border顏色大小重新設置，方便觀察和理解*/
????border:2px?black?solid;
????width:100px;
????height:200px;
????float:left;
}
.ss{
	/*此處將ss的border顏色改一下，方便觀察和理解*/
????border:2px?green?solid;
}

</style>
</head>
<body>
<div?id="div1">欄目1</div>
<div?id="div2">欄目2</div>
<div?class="ss">hao888</div>
</body>
</html>

運行結果：

由此可見，【第三個盒子為什么沒有邊框】的原因是因為被第二個盒子的邊框給覆蓋了，其實第三個盒子的邊框還在，只是兩者都是紅色的，所以無法分辨該框是屬于誰的。而文字由于系統默認會被排斥到邊框外面顯示，以至于視覺上誤以為該文字的邊框消失了。

【如果有三個盒子，中間的盒子浮動，是跟第一個同行還是跟第三個同行？】答案是跟第三個同行。因為塊狀元素是獨占一行的，所以第一個在沒有設置浮動模型的情況下是不允許第二者與其同行的！而中間的盒子浮動的位置是在第二行，第三行在沒有設置浮動模型的情況下也是獨占一行的，在默認情況下是從左邊開始霸占位置的，以至于和中間浮動的那家伙重合去了，實際上浮動的盒子與第三個盒子已經在同一行了，不信你還可以將第三個盒子設置float:right看看

以上為在下的個人理解，如有不對之處，還望指教。