CSS فلاٹ

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS فلاٹ

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

CSS فلاٹ نمبران - کجھ سمت سے فلاٹ کئے گئے عناصر

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

CSS فلاٹ نمبران - بائیں سمت سے فلاٹ کئے گئے عناصر

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

CSS فلاٹ نمبران 2 - بائیں سمت سے فلاٹ کئے گئے عناصر

CSS فلاٹ پرپریئٹی نمبران

在 CSS 中，我们通过 float 属性实现元素的浮动。

如需更多有关 float 属性的知识，请访问参考手册：CSS فلاٹ پرپریئٹی نمبران。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

رنگ بند فیلڈ کا احاطہ فلاٹ فیلڈ کے گرد

要想阻止行框围绕浮动框，需要对该框应用 clear پریمپclear پریمپ کا مقدار left، right، both یا none کا استعمال کیا جاسکتا ہے، جو کا مطلب ہوتا ہے کہ کیسا کا حصہ بندھی کا کسی جگہ ساتھ نہیں جائے گا۔

یہ اثر حاصل کرنے کی خاطر، صفائی کا استعمال کیا جانا چاہئے، جو صفائی کئے جانے والے عنصر کی اعلیٰ مارجر میں استعمال کیا گیا ہے،اعلیٰ مارجرکافی فاصلہ اضافہ کریں، تاکہ عناصر کی اعلیٰ حصہ کی کسی جگہ سمت بندھی کا نیچے سے عمود طور پر نکل جائے:

کلیئر پرپریئٹی نمبران - رینگ بند فیلڈ پر کلیئر کا استعمال

یہ ایک مفید آلہ ہے، جو اطراف کا عناصر کو بندھی عناصر کی جگہ نکال دیتا ہے۔

بندھی تصویر کو متن کا بلوک کے چپ میں بندھنا چاہتے ہیں، اور اس تصویر اور متن کو ایک دیگر عنصر میں بندھنا چاہتے ہیں جس میں پس منظر رنگ اور بوردر موجود ہوتا ہے، تو آپ نکل سکتے ہیں:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>کچھ متن</p>
</div>

اس صورت میں، ایک مسئلہ بھی آیا ہے، کیونکہ بندھی عناصر بندھی عناصر سے دور رہتے ہیں، لہذا بندھی تصویر اور متن کی div کو کوئی جگہ نہیں کچھ کا احاطہ نہیں کرتا۔

کوئی عنصر کو بصری طور پر بندھی عناصر کے گرد بندھنا کیسے ممکن ہوتا ہے؟ اس عنصر کے کسی جگہ clear استعمال کیا جانا چاہئے:

کلیئر پرپریئٹی نمبران - خالی عناصر پر کلیئر کی شفافیت

لیکن متاسفانه ایک نئی مسئلہ بھی آئی ہے، کیونکہ کوئی موجود عناصر نہیں ہیں جو صفائی کا استعمال کرسکتا ہے، لہذا صرف ایک خالی عنصر اور اس کو صفائی دینا پڑتا ہے۔

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>کچھ متن</p>
<div class="clear"></div>
</div>

یہ ایسا اثر دیکھائیں گا جو آپ چاہتے تھے، لیکن زیادہ کد لگنا پڑتا ہے، اکثر ایسے عناصر موجود ہوتے ہیں جو کوئی بندھن استعمال کرسکتا ہے، لیکن بعض اوقات بیلا مارکر لگانا ضروری ہوتا ہے تاکہ بندھن کی بنیاد رکھی جائے۔

لیکن ہم کچھ دوسرے طریقے بھی رکھتے ہیں، جو کہ کانٹینر div کو بھرا کیا جاتا ہے:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>کچھ متن</p>
</div>

یہ ایسا اثر دیکھائیں گا جو آپ چاہتے تھے، لیکن متاسفانه، اگلے عناصر اس بھرا عناصر کی وجہ سے متاثر ہو جائیں گے۔ اس مسئلے کو حل کرنے کی خاطر، کچھ لوگ کا رجوع کسی بھی بندھی میں بندھن کے لئے کیا جاتا ہے، اور بعد میں استعمال کرکے معنوی عناصر (غالباً سائٹ کی پاگل) کو صفائی دی جاتی ہے، جس سے بندھن میں غیرضروری مارکر کم ہوتا ہے یا ختم ہوتا ہے۔

بائیں، کدووائی سی کوم اس سائٹ کی تمام صفحات اس تکنیک کو استعمال کرتی ہیں، اگر آپ اپنے CSS فائل کو کھولتے ہیں تو آپ دیکھ سکتے ہیں کہ ہم نے پاگل کی دسوالی پر div کو صفائی کیا ہے اور اس کے اوپر کی تین div سمت چپ میں بھرا ہوئی ہیں۔

CSS کلیئر پرپریئٹی نمبران

ہم تازہ میں CSS کی صفائی کے کام کا اصول اور clear پریمپ کا استعمال کا طریقہ بحث کیا تھا۔ اگر آپ زیادہ معلومات جائزیدار کرنا چاہتے ہیں، تو رجوع دستورزنی کتاب کا دورہ کریں:CSS کلیئر پرپریئٹی نمبران。

فلاٹ اور کلیئر نمبران نمبران

فلاٹ پرپریئٹی نمبران کا سادا استعمال
تصویر کو پاراگراف کی دائیں سمت سے فلاٹ کیا جاتا ہے
حصہ اور بوردر والی تصویر کو پاراگراف کی دائیں سمت سے فلاٹ کیا جاتا ہے
تصویر کو پاراگراف کی دائیں سمت سے فلاٹ کیا جاتا ہے، تصویر پر حصہ اور بوردر شروع کیا جاتا ہے۔
عنوان والی تصویر کو دائیں سمت سے فلاٹ کیا جاتا ہے
عنوان والی تصویر کو دائیں سمت سے فلاٹ کیا جاتا ہے
پاراگراف کی پہلی حرف کو بائیں سمت سے فلاٹ کیا جاتا ہے
پاراگراف کی پہلی حرف کو بائیں سمت سے فلاٹ کیا جاتا ہے، اور اس حرف پر استایل شروع کیا جاتا ہے۔
افقی منو بنانا
ایک سول سیکشن سے بائیں فلاٹ کا استعمال سے افقی منو بنایا جاتا ہے۔
بغیر ٹیبل کا پہلا ویب پیج بنانا
پہلے ویب پیج کو پہلے عنوان، پہلے پائیدار، بائیں ہندسی فہرست اور اصل مضمون کا مواد کے ساتھ بنایا جاتا ہے۔
رینگ بند فیلڈ کی کجھ سمت سے ختم کرنا
یہ مثال، کس طرح سے فلاٹ فیلڈ کو رینگ بند فیلڈ کی کجھ سمت سے ختم کرنا چاہئیے، دکھاتا ہے。