Заставьте таблицу вести себя как элемент блока, в то время как выровнено вправо

Question

Я хотел бы создать таблицу (выровненную по правому краю), и под ней появятся другие элементы html. Другими словами, я хотел бы, чтобы он вел себя так, как будто это элемент блока.

Но абзац после таблицы в div отображается слева от таблицы, и я хочу, чтобы он отображался под таблицей. Пожалуйста, проверьте мой jsfiddle, чтобы увидеть: https://jsfiddle.net/wLysjc6v/

<div>
  <table align="right">
    <tbody>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
      <tr>
        <td>ab</td>
        <td>ab</td>
      </tr>
      <tr>
        <td>bb</td>
        <td>bb</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>cc</td>
      </tr>
    </tbody>
  </table>
</div>
<p> why am i here?</p>

Answer 1

Ваш <table align="right"> имеет float: right на нем, это выводит его из нормального потока страницы (так же, как при использовании position: absolute).

Удалите выравнивание, и оно должно работать хорошо.

Answer 2

<div>
    <table align="right">
        <tbody>
            <tr>
                <th>a</th>
                <th>b</th>
            </tr>
            <tr>
                <td>ab</td>
                <td>ab</td>
            </tr>
            <tr>
                <td>bb</td>
                <td>bb</td>
            </tr>
            <tr>
                <td>cc</td>
                <td>cc</td>
            </tr>
        </tbody>
    </table>
</div>
<div>

<p style="clear: right">
why am i here?
</p>