سی ایس ایس فلاٹ

ਫਲੌਟਿੰਗ ਬਕਸ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਤਰਫ ਲੈ ਜਾ ਸਕਦੀਆਂ ਹਨ, ਜਦੋਂ ਤੱਕ ਉਹ ਆਪਣੇ ਬਾਹਰੀ ਬਰੱਤਰ ਨਾਲ ਸਮਾਵੇਸ਼ੀ ਬਕਸ ਜਾਂ ਦੂਜੇ ਫਲੌਟਿੰਗ ਬਕਸ ਦੇ ਬਰੱਤਰ ਨਾਲ ਟਕਰਾ ਜਾਂਦੀਆਂ ਹਨ。

ਕਿਉਂਕਿ ਫਲੌਟਿੰਗ ਬਕਸ ਦਸਤਾਵੇਜ਼ ਦੀ ਆਮ ਸਰਵਸ਼੍ਰੇਣੀ ਵਿੱਚ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਦਸਤਾਵੇਜ਼ ਦੀ ਆਮ ਸਰਵਸ਼੍ਰੇਣੀ ਵਿੱਚ ਦੇ ਬਲੱਕ ਫਲੌਟਿੰਗ ਬਕਸ ਦੇ ਅਸਤੀਫਾ ਦੇ ਵਿੱਚ ਨਹੀਂ ਹੁੰਦੇ。

سی ایس ایس فلاٹ

ਇਹ ਵੀ ਦੇਖੋ ਚਿੱਤਰ, ਜਦੋਂ ਬਕਸ 1 ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਕਰਦੀ ਹੈ, ਤਾਂ ਉਹ ਦਸਤਾਵੇਜ਼ ਦੀ ਆਮ ਸਰਵਸ਼੍ਰੇਣੀ ਵਿੱਚੋਂ ਬਾਹਰ ਆਉਂਦੀ ਹੈ ਅਤੇ ਸੱਜੇ ਤਰਫ ਲੈ ਜਾਂਦੀ ਹੈ, ਜਦੋਂ ਤੱਕ ਉਸ ਦੇ ਸੱਜੇ ਬਰੱਤਰ ਨਾਲ ਸਮਾਵੇਸ਼ੀ ਬਕਸ ਦੇ ਸੱਜੇ ਬਰੱਤਰ ਨਾਲ ਟਕਰਾ ਜਾਂਦੀ ਹੈ:

CSS فلاٹ نمبر نمبر 1 - درپر فلاٹ کیلیئم

ਇਹ ਵੀ ਦੇਖੋ ਚਿੱਤਰ, ਜਦੋਂ ਬਕਸ 1 ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਕਰਦੀ ਹੈ, ਤਾਂ ਉਹ ਦਸਤਾਵੇਜ਼ ਦੀ ਆਮ ਸਰਵਸ਼੍ਰੇਣੀ ਵਿੱਚੋਂ ਬਾਹਰ ਆਉਂਦੀ ਹੈ ਅਤੇ ਸੱਜੇ ਤਰਫ ਲੈ ਜਾਂਦੀ ਹੈ, ਜਦੋਂ ਤੱਕ ਉਸ ਦੇ ਖੱਬੇ ਬਰੱਤਰ ਨਾਲ ਸਮਾਵੇਸ਼ੀ ਬਕਸ ਦੇ ਖੱਬੇ ਬਰੱਤਰ ਨਾਲ ਟਕਰਾ ਜਾਂਦੀ ਹੈ। ਕਿਉਂਕਿ ਉਹ ਦਸਤਾਵੇਜ਼ ਦੀ ਆਮ ਸਰਵਸ਼੍ਰੇਣੀ ਵਿੱਚ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਉਹ ਜਗ੍ਹਾ ਨਹੀਂ ਕਵਰ ਕਰਦੀ, ਇਸ ਤਰ੍ਹਾਂ ਬਕਸ 2 ਨੂੰ ਦਰਸ਼ਨ ਤੋਂ ਹਟਾ ਦਿੰਦੀ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਤਿੰਨ ਬਕਸਾਂ ਨੂੰ ਸੱਜੇ ਤਰਫ ਲੈ ਜਾਓ, ਤਾਂ ਬਕਸ 1 ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਕਰਦੀ ਹੈ ਜਦੋਂ ਤੱਕ ਉਹ ਸਮਾਵੇਸ਼ੀ ਬਕਸ ਨਾਲ ਟਕਰਾ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਹੋਰ ਦੋ ਬਕਸਾਂ ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਕਰਦੀਆਂ ਹਨ ਜਦੋਂ ਤੱਕ ਉਹ ਪਹਿਲੀ ਫਲੌਟਿੰਗ ਬਕਸ ਨਾਲ ਟਕਰਾ ਜਾਂਦੀਆਂ ਹਨ。

CSS فلاٹ نمبر 2 - چپ فلاٹ کیلیئم

ਜਿਵੇਂ ਇਸ ਚਿੱਤਰ ਵਿੱਚ ਦੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜੇਕਰ ਸਮਾਵੇਸ਼ੀ ਬਕਸ ਬਹੁਤ ਛੋਟੀ ਹੈ ਅਤੇ ਤਿੰਨ ਫਲੌਟਿੰਗ ਇਲਾਕੇ ਨੂੰ ਹੰਡੇ ਨਹੀਂ ਰੱਖ ਸਕਦੀ ਤਾਂ ਹੋਰ ਫਲੌਟਿੰਗ ਬਕਸਾਂ ਹੇਠਾਂ ਜਾਂਦੀਆਂ ਹਨ, ਜਦੋਂ ਤੱਕ ਕਿ ਉਨ੍ਹਾਂ ਨੂੰ ਕਾਫੀ ਜਗ੍ਹਾ ਮਿਲ ਜਾਵੇ। ਜੇਕਰ ਫਲੌਟਿੰਗ ਇਲਾਕੇ ਦੀ ਉਚਾਈ ਵੱਖ-ਵੱਖ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਉਹ ਹੇਠਾਂ ਜਾਣ ਦੇ ਦੌਰਾਨ ਹੋਰ ਫਲੌਟਿੰਗ ਇਲਾਕੇ ਦੁਆਰਾ 'ਕੈਪਟ ਕੀਤੇ' ਜਾ ਸਕਦੇ ਹਨ:

CSS فلاٹ نمبر 2 - چپ فلاٹ کیلیئم

سی ایس ایس فلاٹ پرپرتی

ਸੀਐੱਸਐੱਸ ਵਿੱਚ, ਅਸੀਂ ਫਲੌਟ ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਮਦਦ ਨਾਲ ਇਲਾਕਾ ਦੇ ਇਲਾਕਾ ਨੂੰ ਫਲੌਟ ਕਰਦੇ ਹਾਂ。

ਫਲੌਟ ਪ੍ਰਤੀਯੋਗੀ ਬਾਰੇ ਜਾਣਕਾਰੀ ਲਈ, ਸੰਦਰਭ ਮੈਨੂਅਲ ਦੇ ਪਤਾ ਲਗਾਓ:سی ایس ایس فلاٹ پرپرتی。

ਰੈਕਟੈਂਸੀ ਅਤੇ ਸਾਫ਼ੀ

ਫਲੌਟਿੰਗ ਬਕਸ ਦੇ ਪਾਸੇ ਦੀ ਰੈਕਟੈਂਸੀ ਘੱਟ ਹੋ ਜਾਂਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਫਲੌਟਿੰਗ ਬਕਸ ਨੂੰ ਜਗ੍ਹਾ ਮਿਲਦੀ ਹੈ ਅਤੇ ਰੈਕਟੈਂਸੀ ਫਲੌਟਿੰਗ ਬਕਸ ਦੇ ਚੱਲਣ ਦੀ ਸਮਰੱਥਾ ਹੁੰਦੀ ਹੈ。

ਇਸ ਲਈ, ਫਲੌਟਿੰਗ ਬਕਸ ਬਣਾਉਣ ਨਾਲ ਟੈਕਸਟ ਚਿੱਤਰ ਦੇ ਚੱਲਣ ਦੀ ਸਮਰੱਥਾ ਹੁੰਦੀ ਹੈ:

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

ਜੇਕਰ ਤੁਸੀਂ ਫਲੌਟਿੰਗ ਬਕਸ ਦੇ ਆਸਪਾਸ ਰੈਕਟੈਂਸੀ ਨੂੰ ਰੋਕਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਉਸ ਬਕਸ ਨੂੰ ਐਪਲਾਈ ਕਰਨਾ ਹੋਵੇਗਾ clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

clear ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ left, right, both ਜਾਂ none, ਇਹ ਫਲੌਟਿੰਗ ਬਾਕਸ ਦੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਕਿਸ ਤਰਫ ਨਾਲ ਨਾ ਲਗਾਉਣਾ ਚਾਹੁੰਦੇ ਹਨ ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ。ਸਾਫ਼ ਕੀਤੇ ਐਲੀਮੈਂਟ ਵਿੱਚਉੱਤੇ ਬਾਹਰੀ ਮਾਰਜ਼ੀਨ

کلیئر پرپرتی نمبر 1 - رینج پر کلیئر کیا جاندا

ਉੱਤੇ ਕਾਫੀ ਜਗ੍ਹਾ ਜੋੜੋ, ਤਾਕਿ ਐਲੀਮੈਂਟ ਦੀ ਉੱਚੀ ਕਿਨਾਰੇ ਫਲੌਟਿੰਗ ਬਾਕਸ ਦੇ ਨੇੜੇ ਲੰਮੀ ਹੋ ਜਾਵੇ:

ਇਹ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਟੂਲ ਹੈ, ਜਿਸ ਨਾਲ ਫਲੌਟਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਆਸ-ਪਾਸ ਦੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਜਗ੍ਹਾ ਦੇਣ ਦੀ ਸਮਰੱਥਾ ਹੁੰਦੀ ਹੈ。

.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>some text</p>
</div>

ਇਸ ਹਾਲਾਤ ਵਿੱਚ, ਇੱਕ ਸਮੱਸਿਆ ਆਈ ਹੈ।ਕਿਉਂਕਿ ਫਲੌਟਿੰਗ ਐਲੀਮੈਂਟ ਨੇ ਡਾਕੂਮੈਂਟ ਸਟ੍ਰੀਮ ਤੋਂ ਬਾਹਰ ਨਿਕਲ ਦਿੱਤਾ ਹੈ, ਇਸ ਲਈ ਚਿੱਤਰ ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਘੇਰਣ ਵਾਲੇ div ਨੂੰ ਜਗ੍ਹਾ ਨਹੀਂ ਲਈ。

ਕਿਵੇਂ ਘੇਰਣ ਵਾਲੇ ਐਲੀਮੈਂਟ ਨੂੰ ਫਲੌਟਿੰਗ ਐਲੀਮੈਂਟ ਨੂੰ ਵਿਜੂਅਲ ਤੌਰ 'ਤੇ ਘੇਰ ਲਿਆ ਜਾਵੇ?ਇਸ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਿਸੇ ਥਾਂ clear ਲਗਾਉਣਾ ਹੋਵੇਗਾ:

کلیئر پرپرتی نمبر 2 - خالی کیلیئم پر کلیئر کیا جاندا

ਦੁਖ ਦਾ ਕਾਰਣ ਹੈ ਕਿ ਇੱਕ ਨਵੀਂ ਸਮੱਸਿਆ ਆਈ ਹੈ, ਕਿਉਂਕਿ ਕੋਈ ਮੌਜੂਦਾ ਐਲੀਮੈਂਟ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਇੱਕ ਖਾਲੀ ਐਲੀਮੈਂਟ ਜੋੜਨਾ ਹੈ ਅਤੇ ਉਸ ਨੂੰ ਸਾਫ਼ ਕਰਨਾ ਹੈ。

.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>some text</p>
<div class="clear"></div>
</div>

ਇਸ ਨਾਲ ਅਸੀਂ ਚਾਹੁੰਦਾ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰਾਂਗੇ, ਪਰ ਇਸ ਲਈ ਅਧਿਕ ਕੋਡ ਜੋੜਨਾ ਪਵੇਗਾ।ਕਈ ਵਾਰ �clear ਲਗਾਉਣ ਦੀ ਸਮਰੱਥਾ ਹੁੰਦੀ ਹੈ, ਪਰ ਕਦੇ-ਕਦੇ ਲੇਆਉਟ ਲਈ ਬੇਵਜ੍ਹਾ ਟੈਗ ਜੋੜਣਾ ਪਵੇਗਾ。

ਲੇਕਿਨ ਅਸੀਂ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਵੀ ਹਾਂ, ਉਹ ਹੈ ਕਿ ਕੰਟੇਨਰ 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>some text</p>
</div>

ਇਸ ਨਾਲ ਅਸੀਂ ਚਾਹੁੰਦਾ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰਾਂਗੇ।ਦੁਖ ਦਾ ਕਾਰਨ ਹੈ ਕਿ ਅਗਲਾ ਐਲੀਮੈਂਟ ਇਸ ਫਲੌਟਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਪ੍ਰਭਾਵ ਦਾ ਸਾਹਮਣਾ ਕਰਦਾ ਹੈ।ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਕੁਝ ਲੋਕ layout ਵਿੱਚ ਸਾਰੇ ਚੀਜ਼ਾਂ ਨੂੰ ਫਲੌਟ ਕਰਨ ਦੀ ਚੋਣ ਕਰਦੇ ਹਨ, ਫਿਰ ਉਪਯੁਕਤ ਅਰਥਪੂਰਣ ਐਲੀਮੈਂਟ (ਕਈ ਵਾਰ ਸਾਈਟ ਦਾ ਫੁੱਟ) ਦੀ ਮਦਦ ਨਾਲ ਇਹਨਾਂ ਫਲੌਟਿੰਗ ਨੂੰ ਸਾਫ਼ ਕਰਦੇ ਹਨ।ਇਹ ਬੇਵਜ੍ਹਾ ਟੈਗ ਨੂੰ ਘਟਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ。

ਇੱਕ ਸਚਮੁੱਚ, CodeW3C.com ਸਾਈਟ ਉੱਤੇ ਸਾਰੇ ਪੰਨੇ ਇਸ ਤਕਨੀਕ ਨੂੰ ਅਪਣਾਉਂਦੇ ਹਨ, ਤੁਸੀਂ ਸਾਡੇ CSS ਫਾਈਲ ਨੂੰ ਖੋਲ੍ਹੋ ਤਾਂ ਦੇਖ ਸਕੋ ਕਿ ਅਸੀਂ ਪੇਜ਼ ਫੁੱਟ ਦੇ div ਨੂੰ ਸਾਫ਼ ਕੀਤਾ ਹੈ, ਅਤੇ ਫੁੱਟ ਉੱਤੇ ਦੇ ਤਿੰਨ div ਸੱਜੇ ਤਰਫ ਫਲੌਟ ਹਨ。

سی ایس ایس کلیئر پرپرتی

ਅਸੀਂ ਹਾਲ ਵਿੱਚ ਵਿਸਤਾਰ ਨਾਲ CSS ਸਾਫ਼ ਕਰਨ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਮੇਲੇ ਅਤੇ clear ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਐਪਲੀਕੇਸ਼ਨ ਤਰੀਕੇ ਨੂੰ ਚਰਚਾ ਕੀਤੀ।ਅਗਰ ਤੁਸੀਂ clear ਵਿਸ਼ੇਸ਼ਤਾ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਹਾਸਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸੰਦਰਭ ਮੈਨੂਅਲ ਦੀ ਯਾਤਰਾ ਕਰੋ:سی ایس ایس کلیئر پرپرتی。

浮动和清理 实例

float 属性的简单应用
使图像浮动于一个落的右侧。
将带有边框和边界的图像浮动于落的右侧
使图像浮动于落的右侧。向图像添加边框和边界。
带标题的图像浮动于右侧
使带有标题的图像浮动于右侧
使落的首字母浮动于左侧
使落的首字母浮动于左侧，并向这个字母添加样式。
创建水平菜单
使用具有一栏超链接的浮动来创建水平菜单。
创建无表格的首页
使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
سائیڈ سائیڈ کی فلاٹ کیلیئم کو ختم کرنا
یہ مثال، سائیڈ سائیڈ کی فلاٹ کیلیئم کو کس طرح سے ختم کرنا دکھاتا ہے。