An element with CSS float moving out from its parent element

In my app, there is a part where it lists articles. Title and author are displayed. The problem is that when the author can't fit to one line with the title but the title is not long enough to split into two lines, the author ("by Someone") is positioned in the middle of the border like this:

I haven't got much knowledge with float property (and same with Less), the only thing I know is that it can move things to left or right of all DOM siblings. How to make sure that this "by Someone" span won't move out from layout like this (instead it will make the parent increase its size)?

My code (I used Less to style that):

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}

<!-- language: lang-html -->

<span>
  <a class="post">
    <b>The best article you've ever seen</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 2</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen but it has a very very long title</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 3</b>
    <span class="author">by Someone</span>
  </a>
</span>

<!-- end snippet -->

Note that I used an a element because in my real app it links somewhere.

Your HTML is questionable - I would suggest following semantic rule as well as exploring flexbox or grid system in CSS.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.post {
  padding: 10px;
  cursor: pointer;
  border-bottom: #aaa solid 1px;
}

.post:last-child {
  border-bottom: none;
}

.post:hover {
  background: #f5f5f5;
}

.post:active {
  background: #eee;
}

.post a {
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.post h1 {
  width: 80%;
}

.post .author {
  width: 20%;
  text-align: right;
}

<!-- language: lang-html -->

<section>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen 2</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen but it has a very very long title</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen 3</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
</section>

<!-- end snippet -->

I think you can solve this by adding width:100%; float:left; to the a.post style like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;
  width:100%;
  float:left;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}

<!-- language: lang-html -->

<span>
  <a class="post">
    <b>The best article you've ever seen</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 2</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen but it has a very very long title.</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 3</b>
    <span class="author">by Someone</span>
  </a>
</span>

<!-- end snippet -->

If width: 100% overflows the width of your container, you can add box-sizing: border-box; so its padding is calculated in the 100% width, and not added to it.

I hope this helps! Greetings.