HP 要素の回り込み

Question

要素が回り込みして、
![イメージ説明]WIDTH:600
こんな風にかぶってしまいます。
ソースは、

    <h2 class="h2_up">お知らせ
    <span class="h2_under">最新の日記などをお知らせします。</span></h2>
    <div id="info"></div>
        <script>
            $('#info').load("diary/index.html div[id=info]");
        </script>
        <dl>
            <dt>LINE@アカウント</dt>
            <dd class="text2"><a href="https://line.me/ti/p/%40ilv3256v">LINE@アカウントを作りました。ぜひ友だち追加お願いします。https://line.me/ti/p/%40ilv3256v</a></met></dd>
        </dl>
    </div>

<br><br><br><br><br><br><br><br><br><br><br>
    <h2 class="h2_up">自己紹介
    <span class="h2_under">簡単な自己紹介です。</span></h2>
    <p>ひろむと読んでください。<br>
    大阪在住の中学三年生です！<br>
    HTML,CSS,PHP,jQuery,Javaを勉強（習得）してます！<br>

こんなかんじで、
すでに<br>で位置を合わせています。
で、ないともっと要素が回り込みします。
どうすれば、<br>を使わず、要素を回り込ませなくなりますか？

Answer 1

CSS見てないので確実なことは言えませんが、上の要素がfloatされてるんじゃないかなーと思います。

簡単に回りこみを解除したいのなら、

<h2 class="h2_up">自己紹介

↓

<h2 class="h2_up" style="clear: both">自己紹介

あたりでどうでしょう。
CSSの.h2_up要素に追加しても良いです。

Answer 2

おそらくcssのfloatを使用されているのではないでしょうか？
floatは日本語で（浮く）という意味の通り、他の要素から独立して上に浮いてしまい、
その下に要素が流れ込んでいってしまい、そういう風になるんだと思います。

このへんが参考になるかもしれません
http://bowz.info/781