5,007
社区成员




<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 10px 0;
}
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
<div style="float:left;">O</div>
<div style="float:left; background-color: blue;">A</div>
<div style="float:right; width:50px; background-color: red;">B</div>
</div>
O、A、B都是浮动元素,O、A是做浮动元素,根据宽度计算,A应该处于O的下一行。B是右浮动浮动元素。按照标准,B浮动的时候,顶边不应高于A,因此,B不会放到O的右侧显示<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 10px 0;
}
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
<div style="float:left;">O</div>
<div style="float:right; width:50px; background-color: red;">B</div>
<div style="float:left; background-color: blue;">A</div>
</div>
这时候:<div style="width:400px; height:50px;border:1px solid red;">
<div style="background-color:green; float:left; width:250px;">left</div>
<span style="border:1px solid yellow;">blublublublublublublublublublublublu</span>
<div style="background-color: green;float:right;">right</div>
</div>
截图: