ভাসমান উপাদানগুলি ধারক উপাদানটির উচ্চতায় যুক্ত হয় না এবং তাই আপনি যদি এগুলি পরিষ্কার না করেন তবে ধারকের উচ্চতা বৃদ্ধি পাবে না ...
আমি আপনাকে দৃষ্টিভঙ্গি দেখাব:
আরও ব্যাখ্যা:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
আপনি overflow: hidden;ধারক উপাদানগুলিতেও যুক্ত করতে পারেন তবে আমি আপনাকে clear: both;পরিবর্তে এটি ব্যবহার করার পরামর্শ দিচ্ছি ।
এছাড়াও যদি আপনি কোনও উপাদানটি স্ব-পরিষ্কার করতে পছন্দ করেন তবে আপনি ব্যবহার করতে পারেন
.self_clear:after {
content: "";
clear: both;
display: table;
}
সিএসএস ফ্লোট কীভাবে কাজ করে?
ঠিক ভাসা কি এবং এটি কী করে?
floatসম্পত্তি সবচেয়ে নতুনদের দ্বারা ভুল বুঝে ভাবেন। ঠিক আছে, ঠিক কি করে float? প্রথমদিকে, floatসম্পত্তিটি চিত্রের চারপাশে প্রবাহিত পাঠ্যের জন্য প্রবর্তিত হয়েছিল, যা ভাসমান leftবা হয় right। এখানে @ মাডারা উচিচা এর আরও একটি ব্যাখ্যা ।
সুতরাং, floatপাশাপাশি পাশাপাশি বক্স স্থাপনের জন্য সম্পত্তিটি ব্যবহার করা কি ভুল ? উত্তরটি না ; floatপাশাপাশি আপনি বক্স সেট করার জন্য সম্পত্তিটি ব্যবহার করলে কোনও সমস্যা নেই ।
কোনও স্তর inlineবা blockস্তরকে ভাসিয়ে দেওয়া উপাদানকে উপাদানটির মতো আচরণ করবে inline-block।
ডেমোযদি আপনি কোনও উপাদানকে ভাসাচ্ছেন leftবা right, উপাদানটির widthউপাদানটি কেবল ধারণ করা সামগ্রীতে সীমাবদ্ধ থাকবে, যদি না widthস্পষ্টভাবে সংজ্ঞায়িত করা হয় ...
আপনি floatএকটি উপাদান করতে পারবেন না center। এটি সর্ববৃহত ইস্যুটি আমি সর্বদা প্রথমদের সাথে ব্যবহার করে দেখেছি, ব্যবহার করে float: center;floatসম্পত্তির জন্য বৈধ মান নয় । floatসাধারণত float/ খুব বাম দিকে বা ডানদিকে কন্টেন্ট স্থানান্তর করতে ব্যবহৃত হয় । শুধুমাত্র আছে চার বৈধ মান floatসম্পত্তি অর্থাত left, right, none(ডিফল্ট) এবং inherit।
মূল উপাদানটি ধসে যায়, যখন এটিতে ভাসমান শিশু উপাদান থাকে, এটি প্রতিরোধ করার জন্য, আমরা clear: both;সম্পত্তিটি ব্যবহার করি , উভয় পক্ষের ভাসমান উপাদানগুলি সাফ করার জন্য, যা পিতামণ্ডলের উপাদানটির পতন রোধ করবে। আরও তথ্যের জন্য, আপনি আমার অন্য উত্তরটি এখানে উল্লেখ করতে পারেন ।
(গুরুত্বপূর্ণ) আমাদের বিভিন্ন উপাদানগুলির একটি স্ট্যাক যেখানে রয়েছে তা ভাবুন। আমরা যখন ব্যবহার করিfloat: left; বা float: right;উপাদান একের পর এক স্ট্যাকের উপরে চলে যায়। তাই স্বাভাবিক নথির প্রবাহের উপাদানগুলি ভাসমান উপাদানগুলির পিছনে লুকিয়ে থাকে কারণ এটি স্বাভাবিক ভাসমান উপাদানগুলির তুলনায় স্ট্যাক স্তরে রয়েছে। (দয়া করে z-indexএটি সম্পূর্ণরূপে আলাদা বলে সম্পর্কিত করবেন না ))
সিএসএস কীভাবে কাজ করে তা ব্যাখ্যা করার জন্য উদাহরণ হিসাবে একটি কেস গ্রহণ করে, ধরে নেওয়া আমাদের শিরোনাম, পাদলেখ এবং 2 কলাম সহ একটি সাধারণ 2 কলাম লেআউট প্রয়োজন, তাই এখানে নীলনকশাটি দেখতে কেমন ...
উপরের উদাহরণে, আমরা, হয় আপনি যা করতে পারেন ভাসমান কেবল লাল বক্স হতে হবে floatউভয় left, অথবা আপনি যা করতে পারেন floatউপর leftথেকে, এবং অন্য rightপাশাপাশি, লেআউট উপর নির্ভর করে, যদি এটা 3 কলাম, আপনি মে মাসের float2 কলামকেleft যেখানে অন্য একটি rightতাই নির্ভর করে, যদিও এই উদাহরণে, আমাদের একটি সরলীকৃত 2 কলাম লেআউট রয়েছে যাতে floatএকটিতে leftএবং অন্যটিতে থাকবে right।
লেআউটটি তৈরি করার জন্য মার্কআপ এবং শৈলীগুলি আরও নীচে ব্যাখ্যা করা হয়েছে ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
আসুন লেআউটটি সাথে ধাপে ধাপে যান এবং দেখুন কীভাবে ভাসমান কাজ করে ..
প্রথম সব, আমরা প্রধান মোড়কের উপাদান ব্যবহার করেন, আপনি অনুমান করতে পারেন যে এটি আপনার ভিউপোর্ট, তারপর আমরা ব্যবহার headerএবং দায়িত্ব অর্পণ heightএর 50pxতাই কিছুই অভিনব আছে। এটি কেবলমাত্র একটি সাধারণ অবিবাহিত ব্লক স্তরের উপাদান যা 100%ভাসমান বা আমরা inline-blockএটি নির্ধারিত না করা হলে অনুভূমিক স্থান গ্রহণ করবে।
প্রথম বৈধ মান জন্য floatহয় leftআমাদের উদাহরণে তাই হয়, আমরা ব্যবহার float: left;জন্য .floated_left, তাই আমরা একটি ব্লক ভাসা মনস্থ leftআমাদের ধারক উপাদান।
বাম দিকে কলাম ভাসা
এবং হ্যাঁ, আপনি যদি দেখেন যে মূল উপাদানটি .wrapperধসে পড়েছে, তবে আপনি যে সবুজ সীমান্ত দিয়ে দেখছেন তা প্রসারিত হয়নি, তবে এটি ঠিক করা উচিত? কিছুক্ষণের মধ্যে ফিরে আসবে, আপাতত, আমরা একটি কলামে ভাসিয়েছি left।
দ্বিতীয় কলামে আসছে, এটি দেয় float এই একright
অন্য কলাম ডান দিকে ভাসা
এখানে, আমরা একটি আছে 300pxপ্রশস্ত কলামের যা আমরা floatকরতে right, যা প্রথম কলামের পাশে বসবে হিসাবে এটি বাড়ালো এর leftএবং যেহেতু এটি বাড়ালো এর left, এটা খালি নর্দমা নির্মিত rightএবং যেহেতু উপর স্থান প্রশস্ত ছিল right, আমাদের rightভাসমান উপাদান পুরো পাশে বসেleft একের ।
তবুও, মূল উপাদানটি ধসে গেছে, ভাল, এখন এটি ঠিক করুন fix পিতামণ্ডলীর উপাদানটি ভেঙে যাওয়ার হাত থেকে বাঁচার জন্য অনেকগুলি উপায় রয়েছে।
- খালি ব্লক স্তরের উপাদান যুক্ত করুন এবং
clear: both;প্যারেন্ট এলিমেন্টটি শেষ হওয়ার আগে ব্যবহার করুন , যা ভাসমান উপাদানগুলি ধারণ করে, এখন এটি একটি সস্তা সমাধানclear আপনার ভাসমান উপাদানগুলির যা আপনার জন্য কাজ করবে তবে, আমি এটি ব্যবহার না করার পরামর্শ দিচ্ছি।
শেষের <div style="clear: both;"></div>আগে , যুক্ত করুন.wrapper div
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
ডেমো
ঠিক আছে, এটি খুব ভাল সংশোধন করে, কোনও পতিত অভিভাবক আর নয়, তবে এটি ডিওমে অপ্রয়োজনীয় মার্কআপ যুক্ত করে, তাই কেউ কেউ পরামর্শ দেয়, ব্যবহার করতে overflow: hidden; যে অভিভাবক উপাদানগুলি ভাসমান শিশু উপাদানগুলি ধারণ করে যা উদ্দেশ্য হিসাবে কাজ করে।
ব্যবহার overflow: hidden;করুন.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
ডেমো
এটি প্রতিবার আমাদের প্রয়োজন মতো একটি উপাদান বাঁচায় clear floatতবে আমি যখন এটির সাথে বিভিন্ন ক্ষেত্রে পরীক্ষা করেছি, এটি একটি নির্দিষ্ট ক্ষেত্রে ব্যর্থ হয়েছে, যা box-shadowশিশু উপাদানগুলিতে ব্যবহার করে।
ডেমো (সমস্ত চারদিকে ছায়া দেখতে পাচ্ছেন না,overflow: hidden; এই সমস্যাটি সৃষ্টি করে)
এখন কি? একটি উপাদান সংরক্ষণ করুন, overflow: hidden;সুতরাং পরিষ্কার ক্ল্যাক হ্যাকের জন্য যান না, আপনার সিএসএসে নীচের স্নিপেটটি ব্যবহার করুন এবং আপনি overflow: hidden;পিতামাতার উপাদানগুলির জন্য যেমন ব্যবহার করেন ঠিক তেমন classনীচে কল করুন প্যারেন্ট এলিমেন্টকে স্ব-পরিষ্কার করতে।
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
ডেমো
এখানে, ছায়া উদ্দেশ্য হিসাবে কাজ করে, এছাড়াও এটি পিতৃ উপাদানকে স্ব-সাফ করে দেয় যা ধসে পড়তে বাধা দেয়।
এবং সবশেষে, আমরা clearভাসমান উপাদানগুলির পরে পাদলেখ ব্যবহার করি ।
ডেমো
এটি কখনই float: none;ব্যবহৃত হয়, এটি ডিফল্ট হিসাবে, সুতরাং কোনও ব্যবহার float: none;কীভাবে ঘোষণা করতে হবে ?
ঠিক আছে, এটি নির্ভর করে, আপনি যদি কোনও প্রতিক্রিয়াশীল ডিজাইনের জন্য যাচ্ছেন তবে আপনি এই মানটি অনেক বার ব্যবহার করবেন, যখন আপনি চান যে আপনার ভাসমান উপাদানগুলি একটি নির্দিষ্ট রেজোলিউশনে একে অপরের নীচে রেন্ডার করে। জন্য float: none;সম্পত্তি সেখানে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।
কীভাবে কার্যকর floatতার কয়েকটি বাস্তব-বিশ্বের উদাহরণ ।
- আমরা ইতিমধ্যে প্রথম উদাহরণটি দেখেছি এক বা একাধিক কলাম লেআউট তৈরি করা।
imgভিতরে ভাসমান ব্যবহার করা pযা আমাদের সামগ্রীগুলি চারপাশে প্রবাহিত করতে সক্ষম করবে।
ডেমো (ভাসমান ছাড়াimg)
ডেমো 2 (এতেimgভাসমানleft)
floatঅনুভূমিক মেনু তৈরির জন্য ব্যবহার - ডেমো
পাশাপাশি দ্বিতীয় উপাদানটি ভাসাও বা `মার্জিন` ব্যবহার করুন`
সর্বশেষে তবে সর্বনিম্ন নয়, আমি এই বিশেষ ক্ষেত্রেটি ব্যাখ্যা করতে চাই যেখানে আপনি floatকেবলমাত্র একক উপাদানের সাথে leftতবে আপনি তা করেন নাfloat অন্যটি করেন , তাইলে কী হয়?
মনে করুন আমরা যদি float: right;আমাদের থেকে সরিয়ে ফেলি .floated_right class, তবে এটি ভাসমান নয় বলে divচরম থেকে রেন্ডার leftকরা হবে।
ডেমো
তাই এই ক্ষেত্রে, হয় আপনি যা করতে পারেন floatকরার leftপাশাপাশি
অথবা
আপনি ব্যবহারmargin-left200px করতে পারেন যা বাম ভাসমান কলামের আকারের সমান বা প্রশস্ত হবে ।