画像の周りにテキストを表示する - CSS

これに関してはあまり理解できていないと思う。(2018/3/19)

---

floatとoverflowの2つのプロパティを使って、実装する

Emmentでは以下のようになる

.float-clear>.float-box,p

.float-clear {
    overflow: hidden;
}
.float-box {
    float: left;
}

<div class="float-clear">
    <div class="float-box">
        <img src="google.com" alt="">
    </div>
    <p>回り込み回り込み回り込み回り込み回り込み回り込み回り込み回り込み回り込み回り込み回り込み</p>
</div>

ポイント

1. floatプロパティで回り込みをさせる(float-box)
2. overflowプロパティのhiddenを指定し、回り込みを解除する(float-clear)

floatで回り込み

floatを指定することによって、その周りをテキストが回り込むようになる

overflowのhiddenで回り込みの解除

overflowのhiddenを指定することによって、その要素以降の回り込みを解除することができる。

clearプロパティを使うと意図しないレイアウトになってしまうことがあるらしいため、overflowプロパティを使う。

---

overflowの実際の機能

overflowはボックスの外に出たテキストをどのように表示するかの設定を行うためのプロパティ。

hiddenを指定すると、スクロールバーが出なくなるらしい。

よくわからない...

• overflow - CSS | MDN
• 【CSS】overflowの使い方：hiddenやscrollの違いは？

参考文献