W3Schools Tryit Editor

<!doctype html>
<html>

<body>
<h2>Without clear</h2>
<div>div1</div>
<div>div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>
<h2>Using clear</h2>
<div>div3</div>
<div>div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear">(->オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>		
</body>
</html>