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

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

hzsu

2016-02-26

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

關(guān)注問題我要回答

1160

操作

收起

2 回答

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

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>浮動(dòng)模型</title>
<style?type="text/css">
div{
	border:2px?red?solid;
????width:200px;
????height:400px;
	
}
#div2{
	/*此處將div2的border顏色大小重新設(shè)置，方便觀察和理解*/
????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>

運(yùn)行結(jié)果：

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

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

以上為在下的個(gè)人理解，如有不對(duì)之處，還望指教。