float

inline要素はfloat要素を識別します.だから写真の底には入らず、取り囲む形になっています.

フローティングを無効にする方法

overflow: hidden

漂泊している子供を親に認識させる

clear-fix

フローティングサブ要素を持つ親要素にclear-pixというクラスを与え、仮想要素clear:左または右または両方を作成する仮想要素を作成します.

clear-fix::after {
	display: block;
	content: "";
	clear: both;
}

CSS FloatとClearの説明-CSS floatとclearはどのように動作しますか?
最高のフローティング解除技術は何ですか?
CSSページレイアウト第1部–フローティング、位置決め、表示、フローティングルート、テーブル
フローティングの無効化(Clear)

仮想要素

::beforeは最初のサブエレメントです
::afterは最後のサブエレメントです.

画像を仮想要素に挿入