CSS စာပေးချက် အခြေ - clear နှင့် clearfix

clear 属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear အကျုံး အကျုံး အတိုင်း ကို အသုံးပြုနိုင်သည်

  • none - ဘက်ဘက် ပျံ့နှံ့ခြင်း ကို ခွင့်ပြုသည်။ အရည်အချင်း အကျုံး
  • left - အရှေ့ဘက် ပျံ့နှံ့ခြင်း ကို ခွင့်မပြု
  • right - အနောက်ဘက် ပျံ့နှံ့ခြင်း ကို ခွင့်မပြု
  • both - အရှေ့ဘက် သို့မဟုတ် အနောက်ဘက် ပျံ့နှံ့ခြင်း ကို ခွင့်မပြု
  • inherit - အစိတ်အရာ သည် အဖိုင်ပိုင်း အကျုံး အတိုင်း ကို တိုက်ရိုက် သုံးစွဲသည်

အကျုံး clear အကျုံး အသုံးပြုခြင်း အများဆုံး သည် အစိတ်အရာ ပေါ်တွင် အသုံးပြုသည် float အကျုံး ပြီးပြီ

ပျံ့နှံ့ခြင်း ဖျက်သိမ်းရာတွင် ပျံ့နှံ့ခြင်း နှင့် ဖျက်သိမ်းခြင်း ကို ကွဲပြား မသင့်ဘူး။ အရှေ့ဘက် ပျံ့နှံ့ခြင်း ဖြစ် လျှင် အရှေ့ဘက် ဖျက်သိမ်းလိမ့်မည်။ သူတို့၏ ပျံ့နှံ့ခြင်း ကြောင့် ဖျက်သိမ်းခြင်း ကို တက်ကြွလာ လိမ့်မည်။

အောက်ပါ အကျယ်အဝန်း ကို အရှေ့ဘက် ပျံ့နှံ့ခြင်း ကို ဖျက်သိမ်းလိမ့်မည်။ အမည်ပြုချက် ဖြင့် အရှေ့ဘက် အစိတ်အရာ ကို ခွင့်မပြုသည့် ပြင့်ပြီးပြီ

实例

div {
  clear: left;
}

亲自试一试

clearfix Hack

အစိတ်အရာတစ်ခု အသို့ ထိုအစိတ်အရာ အား ပါဝင်သော အစိတ်အရာ ထက် မြင့်တက် ပြီး ပျံ့နှံ့ခြင်း ဖြင့် ဖြစ် လျှင် ၄င်း အစိတ်အရာ သည် အကောင်းအရာ အပြင် ပေါ်သွားလိမ့်မည့််

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

实例

.clearfix {
  overflow: auto;
}

亲自试一试

只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：

实例

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

亲自试一试

您将在稍后的章节学到 ::after 伪元素。