代码里第三个盒子怎么没有边框了？如果有三个盒子，中间的盒子浮动，是跟第一个同行还是跟第三个同行？
代码里第三个盒子怎么没有边框了？如果有三个盒子，中间的盒子浮动，是跟第一个同行还是跟第三个同行？
hzsu
2016-02-26
2 回答
<!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看看
以上为在下的个人理解，如有不对之处，还望指教。
举报
0/150
提交
取消
