5,007
社区成员




<div style="width:500px; height:150px; border:1px solid green; position:relative;">
<div style="width:100px; height:100px; float:right; position:absolute; border:1px solid red;">absolute</div>
<div style="width:100px; height:100px; float:right; position:relative; border:1px solid red;">relative</div>
</div>
截图:<style type="text/css">
.sub {
width: 100px;
height: 100px;
background-color: green;
margin:0 20px;
}
</style>
<div style="width:500px; border:2px solid red; overflow:hidden;">
<div class="sub" style="float:left;">left</div>
<div class="sub" style="float:right;">right</div>
</div>
示意图:<style type="text/css">
.sub {
width: 200px;
height: 100px;
background-color: green;
margin:10px;
}
</style>
<div style="width:500px; border:2px solid red; overflow:hidden;">
<div class="sub" style="float:left;">left1</div>
<div class="sub" style="float:left;">left2</div>
<div class="sub" style="float:left;">left3</div>
</div>
截图:<style type="text/css">
.sub {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}
</style>
<div id="container" style="width:200px; overflow:hidden; border:1px solid red;">
<div class="sub" style="float:left;">left</div>
<div class="sub" style="float:right;">right</div>
</div>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 50px;
}
</style>
<div>A</div>
<div style="float:left; margin:10px; background-color: red;">O</div>
<div>B</div>
以上代码中,3个 div 的包含块是初始包含块。O 处于 A 和 B 的中间,A和B在理论上应当发生margin 折叠。那么,发生了么?