طفو ومسح CSS

<style>
.float-left {
  float: left;
  width: 120px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  padding: 10px;
}
.float-right {
  float: right;
  width: 120px;
  background: #fce4ec;
  border: 1px solid #f48fb1;
  padding: 10px;
}
</style>
<div class="float-left">طفو لليسار</div>
<div class="float-right">طفو لليمين</div>
<p>النص يلف حول العناصر العائمة...</p>

<style>
.container {
  border: 2px solid #333;
  padding: 10px;
}
.image {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  width: 150px;
  height: 100px;
  background: #e3f2fd;
}
</style>
<div class="container">
  <div class="image">صورة</div>
  <p>النص يلف حول الصورة العائمة. هذا هو تأثير اللف النصي الكلاسيكي الذي صُمم الطفو من أجله أصلاً. النص يتدفق بشكل طبيعي حول العنصر العائم.</p>
</div>

<style>
.parent {
  border: 2px solid red;
}
.child {
  float: left;
  width: 100px;
  height: 100px;
  background: #e3f2fd;
  border: 1px solid #1976d2;
}
</style>
<div class="parent">
  <div class="child">ابن 1</div>
  <div class="child">ابن 2</div>
</div>

<div class="parent">
  <div class="child">محتوى</div>
  <div class="child">محتوى</div>
  <div style="clear: both;"></div>
</div>

<style>
.parent {
  overflow: hidden;
}
</style>

<style>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>
<div class="parent clearfix">
  <div class="child" style="float: left;">محتوى</div>
  <div class="child" style="float: left;">محتوى</div>
</div>

<style>
/* الطريقة القديمة: طفو */
.old-layout {
  overflow: hidden;
}
.old-layout .col {
  float: left;
  width: 33.33%;
}

/* الطريقة الحديثة: Flexbox */
.modern-layout {
  display: flex;
}
.modern-layout .col {
  flex: 1;
}
</style>