为什么浮动我的例子不起作用

Question

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

HTML PART：

<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 PART

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

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

文本应该在div周围浮动。这有什么问题？

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>