自从用了display:flex之后,就不太用float,最近在写一个样式的时候偶然用到了float,但没想到整了一个大乌龙。
目标样式是:右边固定宽度,左边宽度自适应
于是写下如下代码:
<div class="wrap">
<div class="left"></div>
<div class='right'></div>
</div>
.wrap {
width: 500px;
border: black 1px solid;
position:absolute;
}
.right {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left {
height: 100px;
margin-right: 100px;
background: yellow;
}
得到结果并不对
又尝试调整了一下宽度和margin-right和父元素的定位方式之后仍然不对,所以我的脑子中充斥着 '怎么float不上去呢',一度时期怀疑float是不是变了。
直到。。。我发现被浮动的是right,left独占一行,right就算脱离文档流也和left没关系,所以正确的写法就是换一下样式或者标签顺序就可以完成目标样式。