W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h2>Contain Floated Elements</h2>
<p>The w3-clear class makes a parent element contain its floated children.</p>
<p>Compare the red borders around the same floating boxes.</p>
<p>Only the second parent includes w3-clear.</p>

<h3>Without w3-clear</h3>
<div class="w3-border w3-border-red">
  <div class="w3-left w3-blue w3-padding">Left</div>
  <div class="w3-right w3-blue w3-padding">Right</div>
</div>

<div style="clear:both"></div>

<h3>With w3-clear</h3>
<div class="w3-border w3-border-red w3-clear">
  <div class="w3-left w3-blue w3-padding">Left</div>
  <div class="w3-right w3-blue w3-padding">Right</div>
</div>

<p>The second parent border extends around both floating boxes.</p>

</body>
</html>