为了账号安全,请及时绑定邮箱和手机立即绑定

浮动模型 div1设置左浮动后 为什么会消除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>


正在回答

5 回答

因为浮动元素1、脱离普通文档流(导致div2上移)2、占据行框(导致div2的文字上不去)

行框就是文字的高度和容器的宽度,因为div2和div1宽度一样,div1浮动,div2上移,但是div1占据了100*100的行框,所以div2的文字上不去,如果div2的宽度更宽,能容纳字体的宽度,例如150px,字体就会上飘,显示在div2的内部,div1的右边


0 回复 有任何疑惑可以回复我~
#1

慕粉4234690 提问者

非常感谢!
2016-11-15 回复 有任何疑惑可以回复我~

非常感谢各位的回答。

0 回复 有任何疑惑可以回复我~

手动实践操作下会明白的;

582aaa560001a75f04820275.jpg

582aaa560001954c05000177.jpg


0 回复 有任何疑惑可以回复我~

还是不是很明白,能介绍的清楚些不

0 回复 有任何疑惑可以回复我~

好像重叠被挡住了


<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>


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

浮动模型 div1设置左浮动后 为什么会消除div2的边框

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信