右浮动对布局的影响
程序员文章站
2022-07-15 13:00:27
...
之前写代码的时候,发现有个小问题,以前一直没有注意。
直接看demo。
<style type="text/css">
#demo{
width: 400px;
height: 200px;
background: green;
}
#demo > .left{
width: 250px;
height: 200px;
background:#333;
}
#demo > .right{
width: 150px;
height: 200px;
background:red;
float:right;
}
</style>
<div id="demo">
<div class="left">
</div>
<div class="right">
</div>
</div>
右边那个红色的div被挤到下面来了。
然后我们把两个div换一下顺序,变成
<div class="left">
</div>
<div class="right">
</div>
效果就变成这样了。
是不是很神奇。
这其实是因为,当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥,另起一行。
解决的办法有两种,第一种就是像我刚才那样,把浮动的元素放前面。第二种就是把前面一个元素也设置成浮动。
比如我们经常会写这样的效果。(右边长度固定,左边自适应。那就可以用这个方法)
<style type="text/css">
#demo > .left{
width:100%;
height: 200px;
margin-right: 150px;
background:#333;
}
#demo > .right{
width: 150px;
height: 200px;
background:red;
float:right;
}
</style>
<div id="demo">
<div class="right">
</div>
<div class="left">
</div>
</div>