浮動模型 div1設(shè)置左浮動后 為什么會消除div2的邊框
<style type="text/css">
div{
border:2px red solid;
? ? width:100px;
? ? height:100px;
}
</style>
</head>
<body>
<div id="div1"style="float:left;">欄目1</div>
<div id="div2">欄目2</div>
慕粉4234690
2016-11-14
5 回答
舉報
0/150
提交
取消
2016-11-15
因為浮動元素1、脫離普通文檔流（導(dǎo)致div2上移）2、占據(jù)行框（導(dǎo)致div2的文字上不去）
行框就是文字的高度和容器的寬度，因為div2和div1寬度一樣，div1浮動，div2上移，但是div1占據(jù)了100*100的行框，所以div2的文字上不去，如果div2的寬度更寬，能容納字體的寬度，例如150px，字體就會上飄，顯示在div2的內(nèi)部，div1的右邊
2016-11-15
非常感謝各位的回答。
2016-11-15
手動實踐操作下會明白的；
2016-11-14
還是不是很明白，能介紹的清楚些不
2016-11-14
好像重疊被擋住了
<style type="text/css">
div{
border:2px red solid;
? ? width:100px;
? ? height:100px;
}
#div2{
? ? border:2px red solid;
? ? width:150px;
? ? height:150px;
}
</style>
</head>
<body>
<div id="div1" style="float:left;">欄目1</div>
<div id="div2" >欄目2</div>