html - 为什么我的示例 float 不起作用

Question

我有一个简单的问题，我不明白为什么这不起作用:

HTML 部分:

<div class="main">
<p>
  KSDfao oasdkfo posfk  ojsf a osjdf klksj f lkjsdf lkjas j lsajf lkjf  jasfd
  lksf dfj ksfpwo ksdas dflkj jf kasjf ajsfl kasjdfkjasf 9j4k lsidjf  ijsf
  öskjdf jsd falksdjf öaslkjfinkasdn ig sadf sadf sadf sadf asd fas dfsd as  
  fasd fasd fasd fasd fasd fs fsdf asdfsadf sd fsad fsad fasd fasd fasd fasdf
  sdf as f
</p>
<div class="right">Right</div>
</div>

CSS 部分

.main{
    position:relative;
    width: 300px;
}

.right{
    poition: absolute;
    top: 0px;
    float: right;
    border: 1px solid #00f;
    padding: 20px;
    width: 50px;
}

文本应该围绕 div float 。这里有什么问题？

Answer 1

这是您想要的布局吗？如果是这样，请删除 position: absolute，并将 right div 放在标记中的文本之前。

.main {
  width: 300px;
}
.right {
  float: right;
  border: 1px solid #00f;
  padding: 20px;
  width: 50px;
}

<div class="main">
  <div class="right">Right</div>
  <p>
    KSDfao oasdkfo posfk ojsf a osjdf klksj f lkjsdf lkjas j lsajf lkjf jasfd lksf dfj ksfpwo ksdas dflkj jf kasjf ajsfl kasjdfkjasf 9j4k lsidjf ijsf öskjdf jsd falksdjf öaslkjfinkasdn ig sadf sadf sadf sadf asd fas dfsd as fasd fasd fasd fasd fasd fs fsdf
    asdfsadf sd fsad fsad fasd fasd fasd fasdf sdf as f
  </p>
</div>