সিএসএস বিধি "পরিষ্কার: উভয়" কি করে?

Question

নিম্নলিখিত সিএসএস নিয়মটি কী করে:

.clear { clear: both; }

এবং কেন এটি আমাদের ব্যবহার করা দরকার?

Comments

আপনি যখন সিএসএস ব্যবহার করছেন floatএবং নীচে পরবর্তী উপাদান চান, ডান বা বাম দিকে নয়।

— রিজ

উপাদানটি পরিষ্কার সহ যখন ব্যবহৃত হয় তখন নির্দিষ্ট উপাদানটির বাম এবং ডানদিকে কোনও ভাসমান উপাদানকে অনুমতি দেওয়া হয় না: উভয়

— জ্যাকএক্সু

Answer 1

আমি এখানে কীভাবে ভাসমানগুলি (বিশদভাবে) কাজ করে তা ব্যাখ্যা করব না, কেননা এই প্রশ্নটি কেন সাধারণভাবে কেন ব্যবহার করে clear: both;বা clear: both;ঠিক কী করে ...

আমি এই উত্তরটি সহজ এবং মূলে রাখব এবং গ্রাফিকভাবে আপনাকে ব্যাখ্যা করব কেন clear: both;প্রয়োজনীয় বা এটি কী করে ...

সাধারণত ডিজাইনাররা উপাদানগুলি বাম বা ডানদিকে ভাসিয়ে দেয় যা অন্যদিকে একটি ফাঁকা স্থান তৈরি করে যা অন্যান্য উপাদানগুলিকে অবশিষ্ট স্থান গ্রহণ করতে দেয়।

তারা উপাদান ভাসা না কেন?

যখন ডিজাইনার পাশাপাশি পাশাপাশি দুটি ব্লক স্তরের উপাদানগুলির প্রয়োজন হয় তখন উপাদানগুলি ভাসমান হয়। উদাহরণস্বরূপ বলুন যে আমরা একটি বেসিক ওয়েবসাইট ডিজাইন করতে চাই যা নীচের মত লেআউট আছে ...

ডেমো চিত্রের লাইভ উদাহরণ ।

ডেমোর জন্য কোড

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

নোট: আপনি যোগ করার জন্য থাকতে পারে header, footer, aside, sectionযেমন (এবং অন্যান্য HTML5 এর উপাদান) display: block;স্পষ্টভাবে উল্লেখ যে উপাদান ব্লক স্তর উপাদান জন্য আপনার স্টাইলশীট হবে।

ব্যাখ্যা:

আমার একটি বেসিক লেআউট, 1 শিরোলেখ, 1 সাইড বার, 1 সামগ্রী অঞ্চল এবং 1 পাদচরণ রয়েছে।

এর জন্য কোনও ফ্লোট নেই, তারপরে ট্যাগটি headerআসবে asideযা আমি আমার ওয়েবসাইটের সাইডবারে ব্যবহার করব, তাই আমি বামে উপাদানটি ভাসিয়ে দেব।

দ্রষ্টব্য: ডিফল্টরূপে, ব্লক স্তরের উপাদানটি নথিটি 100% প্রস্থ গ্রহণ করে, তবে বাম বা ডানদিকে ভাসতে থাকলে এটি ধারণ করা সামগ্রী অনুসারে এটি আকার পরিবর্তন করবে res

1. ব্লক স্তরের উপাদানগুলির সাধারণ আচরণ
2. ব্লক স্তরের উপাদানগুলির ভাসমান আচরণ

সুতরাং আপনি যেমন নোট করেছেন, বামে ভাসমান divস্থানটি তার ডান অব্যবহৃত জায়গায় ছেড়ে দেয়, যা divএটির পরে অবশিষ্ট স্থানটিতে স্থানান্তর করতে দেয় ।

1. divতারা ভাসমান না হলে একের পর এক রেন্ডার দেবে
2. div বাম বা ডান দিকে ভাসতে থাকলে একে অপরের পাশে স্থানান্তরিত হবে

ঠিক আছে, সুতরাং ব্লক স্তরের উপাদানগুলি বাম বা ডানদিকে ভাসা অবস্থায় আচরণ করে, সুতরাং এখন কেন clear: both;প্রয়োজন এবং কেন?

তাই আপনি যদি বিন্যাস করা ডেমো দ্রষ্টব্য - কেস তুমি ভুলে গেছ এ, এখানে এটা ..

আমি বলা ক্লাস ব্যবহার করছি .clearএবং এটিতে clearএকটি মান সহ একটি সম্পত্তি রাখা আছে both। সুতরাং এটির কেন প্রয়োজন তা দেখা যাক both।

আমি ভাসিয়ে রেখেছি asideএবং sectionবামে উপাদানগুলি রেখেছি , সুতরাং একটি দৃশ্যটি ধরুন , যেখানে আমাদের একটি পুল আছে, যেখানে headerশক্ত জমি আছে, asideএবং sectionপুলটিতে ভাসছে এবং পাদলেখ আবার শক্ত জমি, এরকম কিছু ...

সুতরাং নীল জলের ভাসমান উপাদানগুলির ক্ষেত্র কী তা কোনও ধারণা নেই, সেগুলি পুলের চেয়ে বড় বা আরও ছোট হতে পারে, তাই এখানে একটি সাধারণ সমস্যা আসে যা 90% সিএসএসের প্রাথমিক সমস্যায় ফেলে: কেন একটি ধারক উপাদানটির পটভূমি প্রসারিত হয় না? যখন এটি ভাসমান উপাদান রাখে। এটি কারণ কনটেইনার উপাদানটি এখানে একটি পল এবং এটি পলটির কোনও ধারণা নেই যে কতগুলি বস্তু ভাসমান, বা ভাসমান উপাদানগুলির দৈর্ঘ্য বা প্রস্থ কত, তাই এটি প্রসারিত হবে না।

1. নথির সাধারণ প্রবাহ
2. বিভাগগুলি বামে ভাসমান
3. ধারকটির পটভূমির রঙ প্রসারিত করতে ফ্লোটেড উপাদানগুলি সাফ করা হয়েছে

(এটি পরিষ্কার করার জন্য এই উত্তরটির ^{[ক্লিয়ারফিক্স]} বিভাগটি পড়ুন divexplanation ব্যাখ্যা করার উদ্দেশ্যে আমি ইচ্ছাকৃতভাবে একটি খালি উদাহরণ ব্যবহার করছি )

আমি উপরের 3 টি উদাহরণ সরবরাহ করেছি, প্রথমটি হ'ল ডকুমেন্ট প্রবাহ যেখানে redব্যাকগ্রাউন্ডটি কেবল প্রত্যাশা অনুযায়ী রেন্ডার হবে যেহেতু ধারকটি কোনও ভাসমান বস্তু রাখে না।

দ্বিতীয় উদাহরণে, যখন বস্তুটি বামে ভাসা করা হবে, তখন ধারক উপাদান (POOL) ভাসমান উপাদানগুলির মাত্রা জানতে পারবে না এবং তাই এটি ভাসমান উপাদানগুলির উচ্চতা পর্যন্ত প্রসারিত হবে না।

ব্যবহারের পরে clear: both;, ধারক উপাদানটি তার ভাসমান উপাদান মাত্রায় প্রসারিত করা হবে।

আর একটি কারণ clear: both;ব্যবহৃত হয় হ'ল উপাদানটি বাকী স্থানে স্থানান্তরিত করতে প্রতিরোধ করা।

বলুন যে আপনি পাশাপাশি 2 উপাদান এবং তাদের নীচে অন্য উপাদান চান ... সুতরাং আপনি 2 উপাদান বাম দিকে ভাসাবেন এবং আপনি তাদের নীচে অন্যটি চান।

1. divবামে ভাসমান ফলে sectionবাকী স্থানে চলে যাওয়ার ফলে
2. বাড়ালো divতাই সাফ যে sectionট্যাগ বাড়ালো নিচে রেন্ডার করবে divগুলি

---

1 ম উদাহরণ

---

দ্বিতীয় উদাহরণ

সর্বশেষে তবে সর্বনিম্ন নয়, footerট্যাগটি ফ্লোটেড উপাদানগুলির পরে রেন্ডার হবে কারণ আমি clearআমার footerট্যাগগুলি ঘোষণার আগে ক্লাসটি ব্যবহার করেছি , যা নিশ্চিত করে যে সমস্ত ভাসমান উপাদান (বাম / ডান) এই পয়েন্ট পর্যন্ত সাফ হয়ে গেছে।

---

Clearfix

ক্লিয়ারফিক্সে আসছে যা ফ্লোট সম্পর্কিত to ইতিমধ্যে @ এলকির দ্বারা নির্ধারিত হিসাবে , আমরা যেভাবে এই ভাসমানগুলি সাফ করছি সেগুলি করার কোনও পরিষ্কার উপায় নয় কারণ আমরা খালি divউপাদানটি ব্যবহার করছি যা একটি divউপাদান নয় । সুতরাং এখানে ক্লিয়ারফিক্স আসে।

এটিকে ভার্চুয়াল উপাদান হিসাবে ভাবুন যা আপনার পিতামাতার উপাদান শেষ হওয়ার আগে একটি খালি উপাদান তৈরি করবে। এটি ভাসমান উপাদানগুলিকে ধারণ করে আপনার মোড়কের উপাদানটিকে স্বতঃসারণ করবে। এই উপাদানটি আপনার ডোমে অক্ষরে অক্ষরে উপস্থিত থাকবে না তবে কাজটি করবে।

ভাসমান উপাদান থাকা কোনও মোড়ক উপাদানকে স্ব-সাফ করতে আমরা ব্যবহার করতে পারি

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

:afterআমার জন্য ব্যবহৃত সিউডো উপাদানটি নোট করুন class। এটি মোড়কের উপাদানটি নিজেই বন্ধ হওয়ার ঠিক আগে একটি ভার্চুয়াল উপাদান তৈরি করবে। আমরা যদি ডোমটিতে দেখি তবে আপনি ডকুমেন্ট ট্রিতে এটি কীভাবে প্রদর্শিত হবে তা দেখতে পাবেন।

সুতরাং যদি আপনি দেখতে পান, এটি ভাসমান সন্তানের পরে রেন্ডার করা হয় divযেখানে আমরা ভাসমানগুলি সাফ করি যা সম্পত্তিটির divসাথে খালি উপাদান থাকার সমতুল্য কিছুই নয় clear: both;যা আমরা এর জন্যও ব্যবহার করছি। এখন কেন display: table;এবং contentএই উত্তরের সুযোগের বাইরে কেন তবে আপনি এখানে ছদ্ম উপাদান সম্পর্কে আরও শিখতে পারেন ।

নোট করুন যে এটি আইই 8 তেও কাজ করবে কারণ আইই 8 :afterসিউডো সমর্থন করে ।

---

আসল উত্তর:

বেশিরভাগ বিকাশকারী তাদের বিষয়বস্তুগুলি তাদের পৃষ্ঠাগুলিতে বাম বা ডানদিকে ভাসাবেন, সম্ভবত ডিভগুলি ধারণ করে লোগো, সাইডবার, সামগ্রী ইত্যাদি, অবশিষ্ট স্থানটিতেও ভাসমান, সুতরাং clear: both;এটি ব্যবহার করা রোধ করতে , এটি বাম বা ডানদিকে ভাসমান সমস্ত উপাদান সাফ করে।

প্রদর্শন:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

এখন আপনি যদি নীচে অন্য ডিভেন্ডার রেন্ডার করতে চান তবে আপনি div1ব্যবহার করবেন clear: both;যাতে এটি আপনার সমস্ত ভাসমান, বাম বা ডান পরিষ্কার করে দেয়

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

Comments

যদি আপনি ভাসমান সম্পর্কে কখনও না শুনে থাকেন তবে আমি আপনাকে প্রথমে ভাসমানগুলির একটি ভূমিকা পড়ার পরামর্শ দিচ্ছি --- উদাহরণস্বরূপ, পরবর্তী উত্তরের লিঙ্কটি দেখুন। তারপরে ফিরে আসুন এবং এই উত্তরটি পড়ুন - এটি বোধগম্য হবে।

— osa

লক্ষ করুন, ভাসমানগুলি মূলত দুটি ব্লক স্তরের উপাদান পাশাপাশি থাকার জন্য আবিষ্কার করা হয়নি , এটি কেবলমাত্র পার্শ্ব প্রতিক্রিয়া! মূল উদ্দেশ্যটি ছিল পাঠ্যগুলিকে ইনলাইনটির চারপাশে প্রবাহিত করার অনুমতি দেওয়া, যাতে আপনি ছবিগুলি উভয় দিকেই ভাসিয়ে দিয়েছিলেন।

— মাদারার ভূত

এটি পড়ার আগে উল্লেখ করার জন্য সম্পর্কিত সংক্ষিপ্ত উত্তর, কেবলমাত্র একটি সাধারণ ধারণা পেতে .. stackoverflow.com/questions/16568272/…

— মিঃ এলিয়েন

@ মিঃ-এলিয়েন ভাল উদাহরণ, jsfiddle.net/N82UD/1 এর ক্ষেত্রে আপনি যখন স্ক্রিনটি সঙ্কুচিত করবেন তখন ভাসা নিয়ে একটি সমস্যা আছে এবং "সাফ করা" উপাদানটি প্রবাহ অনুসরণ করছে না: jsfiddle.net/N82UD/138 এটি ভাসমান আইটেম 2 এর স্থান গ্রহণ করে

— ওমর

@ কার্লো: উদাহরণস্বরূপ টুইটার বুটস্ট্র্যাপের মতো টেমপ্লেটগুলিতে প্রচুর ব্যবহৃত হয় এমন একটি বিকল্প; করা হয় display: inline-blockএকটি উপাদান, এবং পিতা বা মাতা উপর আপনি ব্যবহার করতে পারেন text-align: left, text-align: centerবা text-align: rightউদাহরণস্বরূপ।

— দান

Answer 2

clearসম্পত্তি ইঙ্গিত করে যে বাম, ডান বা একটি উপাদান উভয় পক্ষের একই ব্লক বিন্যাস অনুষঙ্গের মধ্যে আগের বাড়ালো উপাদান সংলগ্ন হতে পারে না। সাফ উপাদানসমূহ সংশ্লিষ্ট ভাসমান উপাদানগুলির নীচে ঠেলাঠেলি করা হয়। উদাহরণ:

clear: none; উপাদানগুলি ভাসমান উপাদানগুলির সাথে সংলগ্ন থাকে

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; এলিমেন্ট বাম ভাসমান উপাদানগুলির নীচে ধাক্কা

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; উপাদানটি ভাসমান উপাদানের নীচে ঠেলাঠেলি করে

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; উপাদানটি ভাসমান সমস্ত উপাদানের নীচে ঠেলাঠেলি করে

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear বর্তমান ব্লক বিন্যাস প্রসঙ্গে বাহিরগুলি প্রভাবিত করে না

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

Comments

চমৎকার। এটি সেরা উত্তর। আমি ভাবছি কেন অন্য উত্তর গৃহীত হয়েছে।

— সাওয়া

আমরা display: inline-block;এই দৃশ্য থেকে CSS সম্পত্তি সরিয়ে দিলে কী হবে ? এটি inline-blockপিতামাত্ত্বিক উপাদানটিকে তার সহোদর উপাদানগুলিতে প্রসারিত করবে যার ক্লাস রয়েছে float-left। যা "ক্লিয়ারটি বর্তমান ব্লকের ফর্ম্যাটিং প্রসঙ্গের বাইরে ভাসমানকে প্রভাবিত করে না" বিবৃতিটিকে ভুল করে তোলে। কেউ দয়া করে ব্যাখ্যা করতে পারেন?

— শশরিকা বৈদ্যার্থনাথ

@ শশরিকাবৈদ্যার্থনা: পিতামাতাদের উপাদান অগত্যা তার বাচ্চাদের জন্য একটি ব্লক বিন্যাস প্রসঙ্গ তৈরি করে না । আপনার উদাহরণে (ক) অপসারণের display: inline-blockঅর্থ এটি আর কোনও ব্লক ফর্ম্যাটিং প্রসঙ্গে উত্পন্ন করে না (খ) সেই উপাদানটির অভ্যন্তরে ভাসমান / সাফ করে এবং প্রথম ভাসমান অংশগুলি একই ব্লক বিন্যাস প্রসঙ্গে (ভিউপোর্ট) অংশ হয়ে যায়।

— সালমান এ

@ সালমানা, সিএসএসের স্পেসিফিকেশন উল্লেখ করে ব্যাখ্যার জন্য ধন্যবাদ। আমি ব্লক বিন্যাস প্রসঙ্গে সংজ্ঞা সম্পর্কে অবগত ছিলাম না।

— শশরিকা বৈদ্যার্থনাথ

সুন্দর পিচাই ডোপেলপ্যাঞ্জার?

— মনোজ কুমার

Answer 3

সিএসএস ভাসা এবং পরিষ্কার

নমুনা ফিডল

কেবল clear:bothএর divসাথে সম্পত্তি সরিয়ে দেওয়ার চেষ্টা করুন class sampleএবং দেখুন এটি কীভাবে ভাসমান divs।

Answer 4

মিঃ এলিয়েনের উত্তরটি সঠিক, তবে যাইহোক আমি ব্যবহার করার পরামর্শ দিচ্ছি না <div class="clear"></div>কারণ এটি কেবল একটি হ্যাক যা আপনার মার্কআপটিকে মলিন করে দেয়। এটি divখারাপ কাঠামো এবং শব্দার্থকতার দিক থেকে খালি নয় , এটি আপনার কোডটিকে নমনীয়ও করে না। কিছু ব্রাউজারগুলিতে এই ডিভিটি অতিরিক্ত উচ্চতার কারণ হয় এবং আপনাকে height: 0;এটি আরও খারাপ করে যোগ করতে হয় । কিন্তু যখন আপনি আপনার ভাসমান উপাদানগুলির চারপাশে পটভূমি বা সীমানা যুক্ত করতে চান তখন আসল সমস্যাগুলি শুরু হয় - এটি কেবল ধসে পড়বে কারণ ওয়েবটি খারাপভাবে ডিজাইন করা হয়েছিল । আমি ভাসমান উপাদানগুলিকে ধারক করে মোড়ানোর পরামর্শ দিচ্ছি যার ক্লিয়ারফিক্স সিএসএস বিধি রয়েছে। এটি হ্যাক পাশাপাশি, তবে মানব, এসইও রোবোটগুলির জন্য ব্যবহারে আরও নমনীয় এবং পঠনযোগ্য।

Comments

এই অন্যান্য পোস্টে আরও বিশদ রয়েছে clearfix: স্ট্যাকওভারফ্লো

— বিল হোয়াগ

Answer 5

আপনি যখন একটি উপাদান নীচের অংশে রাখতে চান অন্য উপাদানগুলি আপনি সিএসএসে এই কোডটি ব্যবহার করেন। এটি ভাসমানদের জন্য ব্যবহৃত হয়।

আপনি যদি সামগ্রী ভাসা করেন তবে আপনি বাম বা ডানদিকে ভাসতে পারেন ... সুতরাং একটি সাধারণ বিন্যাসে আপনার একটি বাম নেভ, একটি সামগ্রী ডিভ এবং পাদচরণ থাকতে পারে।

পাদলেখ এই দুটি ভাসমানের নীচে থাকে তা নিশ্চিত করতে (আপনি যদি বাম এবং ডানদিকে ভাসতে থাকেন) তবে আপনি পাদলেখকে যেমন রাখেন তেমনই clear: both।

এইভাবে এটি উভয় ফ্লোটের নীচে থাকবে।

(আপনি যদি কেবল বাম ক্লিয়ার করে থাকেন তবে আপনার কেবল সত্যই প্রয়োজন clear: left;))

এই টিউটোরিয়াল মাধ্যমে যান:

Comments

কি টিউটোরিয়াল?

— পিটার মর্টেনসেন