ক্লিয়ারফিক্স কী?

Question

সম্প্রতি আমি কিছু ওয়েবসাইটের কোডটি সন্ধান করছি এবং দেখেছি প্রত্যেকের <div> একটি ক্লাস রয়েছে clearfix।

দ্রুত গুগল অনুসন্ধানের পরে, আমি শিখেছি যে এটি আই 6 এর জন্য মাঝে মাঝে হয় তবে আসলে ক্লিয়ারফিক্স কী?

ক্লিয়ারফিক্স ছাড়াই একটি লেআউটের তুলনায় আপনি কি ক্লিয়ারফিক্সের সাথে একটি বিন্যাসের কয়েকটি উদাহরণ সরবরাহ করতে পারেন?

Comments

এটি আইই 6. এর জন্য নয় A একটি ক্লিয়ারফিক্স নিশ্চিত করে যে একটি divতার ভাসমান বাচ্চাদের ঘিরে রাখার জন্য উপযুক্ত উচ্চতায় পুরোপুরি প্রসারিত হবে। webtoolkit.info/css-clearfix.html

— স্পার্কি

Answer 1

আপনার যদি আই 9 বা তার চেয়ে কম সমর্থন করার প্রয়োজন না হয় তবে আপনি অবাধে ফ্লেক্সবক্স ব্যবহার করতে পারেন এবং ভাসমান লেআউটগুলি ব্যবহার করার দরকার নেই।

এটি লক্ষণীয় যে আজ, লেআউটটির জন্য ভাসমান উপাদানগুলির ব্যবহার আরও ভাল বিকল্পের ব্যবহারের সাথে আরও নিরুৎসাহিত হচ্ছে।

• display: inline-block - উত্তম
• ফ্লেক্সবক্স - সেরা (তবে সীমিত ব্রাউজার সমর্থন)

ফ্লেক্সবক্স ফায়ারফক্স 18, ক্রোম 21, অপেরা 12.10, এবং ইন্টারনেট এক্সপ্লোরার 10, সাফারি 6.1 (মোবাইল সাফারি সহ) এবং অ্যান্ড্রয়েডের ডিফল্ট ব্রাউজার 4.4 থেকে সমর্থিত।

বিস্তারিত ব্রাউজার তালিকার জন্য দেখুন: https://caniuse.com/flexbox ।

(সম্ভবত একবার এর অবস্থান সম্পূর্ণরূপে প্রতিষ্ঠিত হয়ে গেলে এটি উপাদান নির্ধারণের একেবারে প্রস্তাবিত উপায় হতে পারে))

---

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

ক্লিয়ারফিক্স হল ভাসমান উপাদানগুলির জন্য শূন্য-উচ্চতার ধারক সমস্যার মোকাবিলা করার একটি উপায়

একটি ক্লিয়ারফিক্স নিম্নলিখিত হিসাবে সঞ্চালিত হয়:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

অথবা, আপনার যদি আই <8 সমর্থন প্রয়োজন না হয় তবে নিম্নলিখিতগুলিও ঠিক আছে:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

সাধারণত আপনাকে নিম্নলিখিত হিসাবে কিছু করতে হবে:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

ক্লিয়ারফিক্স সহ আপনার কেবল নিম্নলিখিতগুলি প্রয়োজন:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

এই নিবন্ধে এটি সম্পর্কে পড়ুন - ক্রিস কোয়ার @ সিএসএস-ট্রিকস দ্বারা

Comments

পারেন কারনের একটি সাদা স্থান একটি বিন্দু চেয়ে ভাল অভ্যাস পথ, আমি ব্রাউজারে ডট দিয়ে সমস্যা ছিল অত: পর কেন আমি এটি :) একটু উন্নতি অভ্যস্ত আহত :) উল্লেখ

— Val,

content: "\00A0";\ 00A0 একটি সাদা স্থান উপস্থাপন করে, একটি সাধারণ সাদা স্থান ভাল কাজ করে না :) দুঃখিত। :)

— Val,

@ মাডারাউছিহা, প্রদর্শন কেন: ভাসমান উপাদানগুলির চেয়ে ইনলাইন-ব্লকটি ভাল? আমার একমাত্র সমস্যাটি হ'ল ইনলাইন ব্লকটি প্রদর্শন করার কারণে ট্যাগগুলির মধ্যে শ্বেতস্পেসের সমস্যা দেখা দেয় যা সর্বদা সহজেই নিয়ন্ত্রণযোগ্য নয়।

— মউওয়াকওয়াকার

@ কেজকাই: এ কারণেই যখন আরও ব্যাপকভাবে সমর্থিত হয় তখন ফ্লেক্সবক্সই পছন্দসই বিকল্প।

— মাদারার ঘোস্ট

display: inline-blockব্লক-ভিত্তিক লেআউটটির জন্য ভাসমানের চেয়ে ভাল যে দ্বিমত । ইনলাইন-ব্লকগুলি হ'ল তাদের নাম অনুসারে, ইনলাইন স্থাপন করা হয়েছে - বেশিরভাগ লেআউটগুলি ব্লক-ভিত্তিক এবং এই ব্লকগুলিকে একটি ইনলাইন বিন্যাসের প্রেক্ষাপটে রেখে দেওয়া ঠিক বোঝা যায় না। আপনাকে অনেকগুলি ইঙ্গিত করেছেন বলে ইনলাইন ফরম্যাটিং, যেমন আন্তঃ-উপাদান সাদা অংশ, অন্যান্য ইনলাইন উপাদানগুলি, সাইজিং, প্রান্তিককরণ এবং এর সাথে সম্পর্কিত বিভিন্ন সমস্যাগুলির সাথেও আপনাকে মোকাবেলা করতে হবে। মঞ্জুর, ভাসা লেআউটগুলি পুরোপুরি অর্থ দেয় না, তবে অন্তত ফ্লোটগুলি ব্লক-ভিত্তিক হওয়ার সুবিধা রয়েছে।

— BoltClock

Answer 2

অন্য উত্তরগুলি সঠিক। তবে আমি যুক্ত করতে চাই যে এটি সেই সময়ের একটি প্রতিকৃতি যখন লোকেরা প্রথম সিএসএস শিখছিল, এবং floatতাদের সমস্ত বিন্যাস সম্পাদন করতে অপব্যবহার করেছিল। floatপাঠ্যের দীর্ঘ রানের পাশে ভাসমান চিত্রের মতো জিনিসগুলি বোঝানো হয়, তবে প্রচুর লোক এটিকে তাদের প্রাথমিক লেআউট প্রক্রিয়া হিসাবে ব্যবহার করে। যেহেতু এটি সত্যই এর জন্য বোঝানো হয়নি, কাজটি করার জন্য আপনার "ক্লিয়ারফিক্স" এর মতো হ্যাক দরকার।

এই দিনগুলিতে display: inline-blockএকটি শক্ত বিকল্প ( আই 6 এবং আই 7 ব্যতীত ), যদিও আরও আধুনিক ব্রাউজারগুলি আরও বেশি দরকারী লেআউট পদ্ধতি নিয়ে আসছে যেমন ফ্লেক্সবক্স, গ্রিড লেআউট ইত্যাদি under

Comments

আমার অনুশীলন এ এসে গেছে যে কখনও ভাসা ব্যবহার করার কোনও কারণ নেই। আপনি যখনই এটি ব্যবহার করেন তখন অর্ধেক জিনিসটি ভেঙে যায়। আমি কেবল তখনই এটি ব্যবহার করব যখন আমার একটি ডিভের অভ্যন্তরে জঞ্জাল করার জন্য জিনিসগুলি দরকার। ইনলাইন-ব্লক দুর্দান্ত। নতুন বক্স মডেল দুর্দান্ত aw উল্লম্ব সারিবদ্ধ করার জন্য আর কোনও হ্যাক নেই।

— মুহাম্মদ উমার

inline-blockআন্তঃ-ব্লক ব্যবধান সমস্যার কারণে ভাসমানগুলির চেয়ে কঠোর উন্নতি নয় , যেখানে এইচটিএমএল-এ সাদা স্থান স্পেস অক্ষরগুলিতে অনুবাদ করে যা ব্লককে পৃথক করে। inline-blockপ্রয়োজন তার নিজস্ব সমাধান নীচে উপস্থিত , ঠিক floatclearfix প্রয়োজন।

— ররি ও'কেনে

Answer 3

clearfixএকটি ধারক তার বাড়ালো শিশু মোড়ানো করতে পারবেন। একটি clearfixবা সমতুল্য স্টাইলিং ছাড়া , একটি ধারক তার ভাসমান বাচ্চাদের চারপাশে আবৃত করে না এবং ধসে পড়ে, ঠিক যেমন তার ভাসমান বাচ্চাগুলি একেবারে অবস্থিত।

মূল লেখক হিসাবে নিকোলাস গ্যালাগার এবং থিয়েরি কোবলেন্টজ সহ ক্লিয়ারফিক্সের কয়েকটি সংস্করণ রয়েছে ।

আপনি যদি পুরানো ব্রাউজারগুলির জন্য সমর্থন চান তবে এই ক্লিয়ারফিক্সটি ব্যবহার করা ভাল:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

এসসিএসএসে আপনি নিম্নলিখিত কৌশলগুলি ব্যবহার করতে পারেন:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

আপনি যদি পুরানো ব্রাউজারগুলিকে সমর্থন করার বিষয়ে চিন্তা না করেন তবে একটি সংক্ষিপ্ত সংস্করণ রয়েছে:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

Comments

ভাল উত্তর জন! আমি যে বিষয়ে ভাবছি তা হ'ল পরিষ্কার কেন divভাসমান উপাদানগুলিকে মোড়কে তৈরি করে? আপনি কি আমাকে এটি কল্পনা করতে সাহায্য করতে পারেন?

— আলেকজান্ডার সুর্যাপেল

@AlexanderSuraphel এই উত্তর বিস্তারিতভাবে এটা ব্যাখ্যা করে -> stackoverflow.com/questions/12871710/...

— জন Slegers

Answer 4

2017 এর কিউ 2-তে পরিস্থিতি সম্পর্কে একটি আপডেট অফার করার জন্য।

ফায়ারফক্স 53, ক্রোম 58 এবং অপেরা 45 এ একটি নতুন সিএসএস 3 ডিসপ্লে সম্পত্তি উপলব্ধ ।

.clearfix {
   display: flow-root;
}

এখানে যে কোনও ব্রাউজারের উপলভ্যতা পরীক্ষা করুন: http://caniuse.com/#feat=flow-root

উপাদানটি (ফ্লো-রুটে সেট থাকা একটি প্রদর্শন সম্পত্তি সহ) একটি ব্লক ধারক বাক্স তৈরি করে এবং প্রবাহ বিন্যাসটি ব্যবহার করে এর বিষয়বস্তুগুলি দেয়। এটি সর্বদা তার বিষয়বস্তুর জন্য একটি নতুন ব্লক ফর্ম্যাটিং প্রসঙ্গ স্থাপন করে।

এর অর্থ হ'ল আপনি যদি এক বা একাধিক ভাসমান শিশু সমন্বিত একটি পিতামাতার ডিভি ব্যবহার করেন তবে এই সম্পত্তিটি পিতামাতার সমস্ত শিশুকে আবদ্ধ করে তা নিশ্চিত করবে। ক্লিয়ারফিক্স হ্যাকের কোনও প্রয়োজন ছাড়াই। যে কোনও শিশুদের জন্য, এমনকি কোনও শেষ ডামি উপাদানও (যদি আপনি ক্লিয়ারফিক্স বৈকল্পিকটি ব্যবহার করছিলেন: শেষ বাচ্চাদের আগে)।

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Comments

প্রশ্নের সাথে এটি কী করে আপনি বর্ণনা করতে পারেন?

— 1.21 গিগাওয়াট

ক্লিয়ারফিক্স হ'ল চালাক হ্যাকগুলি ব্যবহার করে পিতামাতার প্রবাহকে প্রভাবিত না করে ভাসমান বাচ্চাদের পরিবর্তন করে, flow-rootএটিই আসল সমাধান।

— mystrdat

Answer 5

সহজ ভাবে বললে, clearfix একটি হ্যাক হয় ।

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

আমি ব্যক্তিগতভাবে মাইক্রো ক্লিয়ারফিক্স সমাধান (নিকোলাস গ্যালাগার) এর দিকে ঝুঁকছি

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

উল্লেখ

Answer 6

সিএসএস ফ্লোট-ভিত্তিক লেআউটগুলিতে সাধারণত ব্যবহৃত একটি কৌশল একটি মুষ্টিমেয় সিএসএস বৈশিষ্ট্য এমন একটি উপাদানকে অর্পণ করে যা আপনি জানেন যে ভাসমান উপাদান থাকবে contain প্রযুক্তি, যা সাধারণত শ্রেণীর সংজ্ঞা নামে পরিচিত ব্যবহার করা হয় clearfix, (সাধারণত) নিম্নলিখিত সিএসএস আচরণগুলি প্রয়োগ করে:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

এই সম্মিলিত আচরণগুলির উদ্দেশ্য হ'ল :afterএকটি একক 'সমন্বিত সক্রিয় উপাদান একটি ধারক তৈরি করা ।' লুকানো হিসাবে চিহ্নিত করা হয়েছে যা সমস্ত পূর্ববর্তী অবস্থানগুলি সাফ করবে এবং পরবর্তী অংশের সামগ্রীর জন্য পৃষ্ঠাটিকে কার্যকরভাবে পুনরায় সেট করবে।

Answer 7

ক্লিয়ারফিক্স পেতে বা অন্য (এবং সম্ভবত সবচেয়ে সহজ) বিকল্পটি হ'ল উপাদানটি ব্যবহার overflow:hidden;করা। উদাহরণ স্বরূপ

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

অবশ্যই এটি কেবলমাত্র এমন ক্ষেত্রে ব্যবহার করা যেতে পারে যেখানে আপনি কখনই সামগ্রীটি উপচে পড়তে চান না।

Answer 8

আমি স্বীকৃত উত্তরটি চেষ্টা করেছিলাম তবে আমার এখনও সামগ্রীতে প্রান্তিককরণের সমস্যা ছিল। নীচে প্রদর্শিত হিসাবে একটি ": পূর্বে" নির্বাচিত যুক্ত করা বিষয়টিকে স্থির করে:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

উপরে কম নীচে সিএসএসে সংকলন করা হবে:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Answer 9

এখানে ভিন্ন পদ্ধতি একই জিনিস তবে কিছুটা আলাদা

পার্থক্য হ'ল সামগ্রী বিন্দু যা একটি \00A0== দ্বারা প্রতিস্থাপিত হয়whitespace

এটিতে আরও http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

এটির একটি কমপ্যাক্ট সংস্করণ এখানে ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}

Comments

আপনি এখানে কমপক্ষে 3 টি পরিস্থিতিতে নিজেকে ওভাররাইড করছেন। .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, এবং .clearfix {...}সব একই জিনিস নির্বাচন করুন ও একে অপরের ওভাররাইট করবে। এটি সামান্য হ্যাকি এবং সত্যই প্রয়োজন নেই।

— ওড়িয়ান

এই সিএসএস clearfix পদ্ধতি পুরোনো সংস্করণ, থেকে নেওয়া হয় ছিল css-tricks.com/snippets/css/clear-fix , যা আমি তারপর খুঁজে পাওয়া যায় নি যে, "।" [ডট] খুব বিরক্তিকর ছিল এবং একটি সাদা স্থান সঙ্গে এটি প্রতিস্থাপিত , তাই কেন \00A0, আমি মনে করি এটি ক্রস ব্রাউজারের সামঞ্জস্যতা এবং সেই সময়ের জ্ঞানের কারণে হয়েছিল।

— Val,