Float and Clear

<div class="float-box">Floated</div>
<p>This text wraps around the floated box. Float was originally designed for this - wrapping text around images. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

.float-box {
float: left;
width: 100px;
height: 80px;
margin: 0 12px 8px 0;
background: #6366f1;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 6px;
}
p { margin: 0; color: #334155; }

<div class="float-box left">Left</div>
<div class="float-box right">Right</div>
<div class="cleared">Cleared - starts below both floats</div>

.float-box { width: 80px; height: 60px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; border-radius: 4px; }
.left { float: left; background: #6366f1; }
.right { float: right; background: #059669; }
.cleared {
clear: both;
margin-top: 8px;
padding: 8px;
background: #fef9c3;
border: 1px solid #f59e0b;
border-radius: 4px;
font-weight: bold;
}