ব্যবহার: ভাসমান উপাদানগুলি সাফ করার পরে

Question

আমার একটি তালিকা আছে এবং লি'র একটি আছে float:left;। পরে বিষয়বস্তু<ul> সঠিকভাবে প্রান্তিক করা উচিত। অতএব আমি নিম্নলিখিতগুলি তৈরি করতে পারি:

http://jsfiddle.net/8unU8/

আমি ভেবেছিলাম, আমি <div class="clear">সিউডো সিলেক্টর: এর পরে ব্যবহার করে এটি সরিয়ে ফেলতে পারি ।

তবে উদাহরণটি কাজ করছে না:

http://jsfiddle.net/EyNnk/

ভাসমান উপাদানগুলি সাফ করার জন্য আমাকে কি সর্বদা আলাদা ডিভ তৈরি করতে হবে?

Answer 1

এভাবে লিখুন:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

এটি http://jsfiddle.net/EyNnk/1/ দেখুন

Comments

এটি কিভাবে এটি করতে হয়। তবে দয়া করে শব্দার্থবিজ্ঞান সম্পর্কে আমার উত্তরের বিষয়টি উল্লেখ করুন।

— অ্যালেক্স

কেবলমাত্র একটি সামান্য তথ্য: ::afterডাবল কোলন সহ সিউডো-এলিমেন্টগুলি লক্ষ্য করে দেখার প্রস্তাব দেওয়া উপায়।

— ডেনিস98

প্রতিটি ব্রাউজার যা ডাবল কোলনকে সমর্থন করে (: :) সিএসএস 3 সিনট্যাক্সটিও কেবল (:) সিনট্যাক্স সমর্থন করে তবে আই 8 কেবলমাত্র একক-কোলনকে সমর্থন করে তাই আপাতত সেরা ব্রাউজার সমর্থনের জন্য কেবলমাত্র সিঙ্গল-কোলন ব্যবহার করার পরামর্শ দেওয়া হয়। :: সিউডো নির্বাচকদের থেকে সিউডো সামগ্রী আলাদা করার জন্য নতুন বিন্যাসটি হ'ল। আপনার যদি আই 8 সাপোর্টের প্রয়োজন না হয় তবে দ্বি-কোলনটি নির্দ্বিধায় ব্যবহার করুন। css-tricks.com/almanac/selectors/a/ after

— be

আমাদের এটিকে কেন রাখা উচিত: "সামগ্রী: ''; প্রদর্শন: ব্লক;" ? এবং আপনি যদি একটি ইনলাইন মোড়ক চান?

— লুক

Answer 2

না, আপনি এ জাতীয় কিছু করার পক্ষে যথেষ্ট নন:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

এবং নিম্নলিখিত সিএসএস:

ul li {float: left;}


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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

Answer 3

এটি পাশাপাশি কাজ করবে:

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

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

বর্গ দাও clearfixকরার পিতা বা মাতা আপনার উদাহরণস্বরূপ, উপাদান ulউপাদান।

সূত্র এখানে এবং এখানে ।

Comments

প্রদর্শন: টেবিল অতিরিক্ত ব্যবধান যোগ করতে পারে; আমি প্রদর্শন ব্যবহার করি: পরিবর্তে অবরুদ্ধ করুন

— দ্য কোগ

Answer 4

'দশদা' লেখাটি কখনও কোনও ট্যাগের মধ্যে থাকবে না, তাই না? শব্দার্থগতভাবে এবং এটি হিসাবে বৈধ এইচটিএমএল হওয়ার জন্য, কেবল এতে পরিষ্কার ক্লাস যুক্ত করুন:

http://jsfiddle.net/EyNnk/2/

Comments

এটি মোটেও শব্দার্থবিজ্ঞান নয়। 1) আমরা তার পিতা-মাতার উপাদানটিকে সর্বদা পরিষ্কার করি যদি তার উত্তরটি যেমন উত্তর দেয় তবে যদি আমি তার উত্তর হিসাবে উল্লিখিত থাকে তবে এটি এলআই এর আবরণ নয় কারণ আমি স্পষ্ট জানি না এবং 2) আমার প্রশ্ন আছে আপনি কেন পরিষ্কার দেন? পি এর আগে আলাদা ডিআইভিতে ক্লাস করুন আপনি পি কে দিলে এটিও কাজ করে

— সন্দীপ

Answer 5

ব্যবহার

.wrapper:after {
    content : '\n';
}

অনেকটা সমাধান যেমন রোকো সরবরাহ করে। এটি psuedo এর আগে: পরে এবং: ব্যবহার করে সামগ্রী সন্নিবেশ / পরিবর্তন করতে দেয়। বিশদগুলির জন্য http://www.quirksmode.org/css/content.html দেখুন