float div вправо, но текст не переносится

Question

Пытался заставить текст обернуться вокруг элемента div (смещенного вправо), но текст

остается независимо вверху, а элемент div внизу. Кроме того, когда я не добавил display: inline-block для div класса ".home", оказалось, что div ".tweets" даже не был внутри div ".home" при выполнении float: right на ".tweets" div.Why?

<template>
  <div class="home contentFrame">
    <p>This is home page This This is home page This This is home page This This This is home page This This is home page This This is home page This This is home page This This is home page This This is home page This This This is home page This This is home page This This is home page This This is home page This This is home page This This is home page This This  is home page This This is home page This This is home page This This is home page This</p>
    <tweets></tweets>
  </div>
</template>

<script>
import tweets from "@/components/tweets.vue";

export default {
  name: "home",
  components: {
    tweets
  }
};
</script>

<style lang="scss" scoped>
.home {
  display: inline-block;
  .tweets {
    float: right;
  }
}    
</style>