ブロック要素を実践しながら理解する

ブロック要素はコンテンツをまとめる際に使用します。
と言われても、わかるような、わからないような…
具体的にどんなコードがあるのでしょうか。
実践しながら、理解を深めます。

勉強のために閲覧したサイトはこちらです↓↓
CSSのdisplay:block;とは？ブロック要素について詳しく解説 | 侍エンジニアブログ

左右にコンテンツを配置してみる
テキストブロックを横並び配置してみる
まとめ

左右にコンテンツを配置してみる

HTML

<section class="left_side">
    左ブロック
</section>
<section class="right_side">
    右ブロック
</section>

CSS

.left_side {
    background-color: #bbb;    /* 背景色指定 */
    width: 50%;                /* 幅指定 */
    float:  left;              /* 要素を並べる */
    height: 200px;             /* 高さ指定 */
}

.right_side {
    background-color: #aaa;    /* 背景色指定 */
    width:  50%;               /* 幅指定 */
    float:  left;              /* 要素を並べる */
    height: 200px;             /* 高さ指定 */
}

左ブロック

右ブロック

補足：
float: left; とは、要素を左寄せで、横に並べますよ、ということ。
下記の参考サイトに丁寧に説明がありました。

参考サイト：
CSS floatプロパティの基礎をわかりやすく解説！CSS…｜Udemy メディア

テキストブロックを横並び配置してみる

完成イメージ

テキスト１

テキスト２

テキスト３

HTML

<div class="float_text">
    テキスト１
</div>
<div class="float_text">
    テキスト２
</div>
<div class="float_text">
    テキスト３
</div>

CSS

.float_text {
    color:  #fff;  
    background-color:  #ff701e;    /* 背景色指定 */
    border: 2px solid #d14f03;    /* 枠色指定 */
    border-radius: 30px;        /* 枠角の丸み指定 */
    float:  left;               /* 横並びにする */
    margin:  5px;               /* 要素と要素の間を開ける */
    padding:  10px;             /* 余白指定 */
}

補足：
要素が回り込み、配置がおかしくなることがあります。
その際には、回り込み防止ために、clear: left; を使うと解決します。