কারণ
সমস্যাটি হচ্ছে ভাসমান উপাদানগুলি প্রবাহের বাইরে :
কোনও উপাদান যদি ভাসমান, একেবারে অবস্থানযুক্ত বা মূল উপাদান হয় তবে তাকে প্রবাহের বাইরে বলা হয় ।
অতএব, তারা আশেপাশের উপাদানগুলিকে কোনও ইন-ফ্লো উপাদান হিসাবে প্রভাবিত করে না ।
এটি 9.5 ফ্লোটে ব্যাখ্যা করা হয়েছে :
যেহেতু কোনও ফ্লোট প্রবাহে নেই, তাই ফ্লোট বাক্সের আগে এবং পরে উল্লম্বভাবে প্রবাহিত নন-অবস্থানীয় ব্লক বাক্সগুলি যেন ভাসমানটির অস্তিত্ব নেই। যাইহোক, ফ্লোটের পাশের তৈরি বর্তমান এবং পরবর্তী লাইন বাক্সগুলি ফ্লোটের মার্জিন বক্সের জন্য জায়গা তৈরি করার জন্য প্রয়োজনীয় হিসাবে সংক্ষিপ্ত করা হয়েছে।
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
এটি 10.6 গণনা উচ্চতা এবং মার্জিনেও নির্দিষ্ট করা আছে । জন্য "স্বাভাবিক" ব্লক ,
কেবলমাত্র সাধারণ প্রবাহের শিশুদেরই বিবেচনায় নেওয়া হয় (যেমন, ভাসমান বাক্স এবং একেবারে অবস্থানযুক্ত বাক্সগুলি উপেক্ষা করা হয় […])
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 130px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
হকি সমাধান: ছাড়পত্র
সমস্যা সমাধানের একটি উপায় হ'ল কিছু ফ্লো উপাদানকে সমস্ত ফ্লোটের নীচে রাখতে বাধ্য করা। তারপরে, পিতামাতার উচ্চতা সেই উপাদানটি মোড়ানোর জন্য বাড়বে (এবং এভাবে ভাসমান)।
সম্পত্তি ব্যবহার করে এটিclear অর্জন করা যেতে পারে :
এই বৈশিষ্ট্যটি সূচিত করে যে কোনও উপাদানের বাক্সের কোন দিকগুলি (এস) এর
আগের ভাসমান বাক্সের সাথে সংলগ্ন নাও হতে পারে।
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 84px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.clear {
clear: both;
text-align: center;
height: 37px;
border: 3px dashed pink;
}
.clear:after {
position: static;
content: 'Block sibling with clearance';
color: pink;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
<div class="clear"></div>
</div>
সুতরাং একটি সমাধান clear: bothভাসমানগুলির শেষ সহোদর হিসাবে খালি উপাদান যুক্ত করছে
<div style="clear: both"></div>
তবে এটি শব্দার্থক নয়। পিতামাতার শেষে একটি ছদ্ম-উপাদানটি আরও ভাল উত্পন্ন করুন :
.clearfix::after {
clear: both;
display: block;
}
এই পদ্ধতির একাধিক রূপ রয়েছে, যেমন :afterপুরানো ব্রাউজারগুলিকে সমর্থন করতে অবহেলিত একক কোলন সিনট্যাক্স ব্যবহার করা বা অন্য ব্লক-স্তরের প্রদর্শনগুলি ব্যবহার করে display: table।
সমাধান: বিএফসি শিকড়
শুরুতে সংজ্ঞায়িত সমস্যাযুক্ত আচরণের ব্যতিক্রম রয়েছে: যদি কোনও ব্লক উপাদান ব্লক বিন্যাস প্রবন্ধটি (একটি বিএফসি রুট) স্থাপন করে, তবে এটি তার ভাসমান সামগ্রীগুলিও আবৃত করবে।
ব্লক ফর্ম্যাটিং প্রসঙ্গে শিকড়গুলির জন্য 10.6.7 'অটো' উচ্চতা অনুসারে ,
যদি উপাদানের কোনও ভাসমান বংশধর থাকে যার নীচের প্রান্তিক প্রান্তটি নীচের অংশের নীচের অংশের নীচে থাকে, তবে সেই প্রান্তগুলি অন্তর্ভুক্ত করতে উচ্চতা বৃদ্ধি করা হয়।
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent.bfc-root:after {
content: 'BFC parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 127px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="block-parent bfc-root">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
অতিরিক্ত হিসাবে, 9.5 ফ্লোট হিসাবে ব্যাখ্যা হিসাবে , বিএফসি শিকড়গুলি নিম্নলিখিতগুলির কারণেও দরকারী:
কোনও সারণির সীমানা বাক্স, একটি ব্লক-স্তরীয় প্রতিস্থাপনকারী উপাদান বা সাধারণ প্রবাহে এমন একটি উপাদান যা একটি নতুন ব্লক ফর্ম্যাটিং প্রসঙ্গটি প্রতিষ্ঠা করে […] অবশ্যই উপাদানটির মতো একই ব্লক বিন্যাস প্রসঙ্গে কোনও ফ্লোটের মার্জিন বক্সকে ওভারল্যাপ করা উচিত নয় must ।
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
একটি ব্লক বিন্যাস প্রসঙ্গে প্রতিষ্ঠিত হয়
যেমন overflowব্যতীত বাক্সগুলি ব্লক করুনvisiblehidden
.bfc-root {
overflow: hidden;
/* display: block; */
}
ব্লক পাত্রে যেগুলি ব্লক বাক্স নয়: কখন displayসেট থাকে inline-block, table-cellবা table-caption।
.bfc-root {
display: inline-block;
}
ভাসমান উপাদান: কখন floatসেট করা হয় leftবা right।
.bfc-root {
float: left;
}
একেবারে অবস্থানযুক্ত উপাদান: কখন positionসেট করা হয় absoluteবা fixed।
.bfc-root {
position: absolute;
}
এগুলির অনাকাঙ্ক্ষিত সমান্তরাল প্রভাব থাকতে পারে যেমন ওভারফ্লো প্রসারণের সামগ্রীটি ক্লিপ করা, সঙ্কুচিত থেকে ফিট ফিট অ্যালগরিদম দিয়ে অটো প্রস্থ গণনা করা বা প্রবাহের বাইরে চলে যাওয়ার মতো। সুতরাং সমস্যাটি হ'ল বিসিএফসি প্রতিষ্ঠিত দৃশ্যমান ওভারফ্লো সহ একটি ইন-ফ্লো ব্লক-লেভেল উপাদান থাকা সম্ভব নয়।
L3 এই সমস্যাগুলিকে দেখায় :
তৈরী করা হয়েছে flowএবং ভেতরের প্রদর্শন ধরনের ভাল দ্রুতগামী প্রবাহ লেআউটে প্রদর্শন ধরনের এবং একটি উপাদান একটি তৈরীর জন্য একটি সুনির্দিষ্ট সুইচ তৈরি করতে BFC রুট। (এটির মতো হ্যাকগুলির প্রয়োজনীয়তা এবং […]flow-root ::after { clear: both; }overflow: hidden
দুঃখের বিষয়, এখনও ব্রাউজার সমর্থন নেই। শেষ পর্যন্ত আমরা ব্যবহার করতে সক্ষম হতে পারি
.bfc-root {
display: flow-root;
}