Layout ng CSS - Clear at clearfix

clear attribute

clear Ang attribute ay nagsasagawa ng kung aling mga elemento ang maaaring lumutang sa tabi ng nililinis na elemento at sa anong panig.

clear Ang attribute ay maaaring magtatakda ng isa sa mga sumusunod na halaga:

  • none - pinahihintulutan ang paglulutang sa parehong panig. Ang default na halaga
  • left - walang magiging paglulutang sa kanan
  • right - walang magiging paglulutang sa kanan
  • both - walang magiging paglulutang sa bawat dakilang panig
  • inherit - ang elemento ay kumukuha ng halaga ng clear mula sa kanyang magulang na elemento

paggamit clear Ang pinakamgaanang paggamit ng attribute ay ang paggamit nito sa elemento. float pagkatapos ng attribute.

Sa paglilinis ng paglulutang, dapat na magkakatugma ang paglilinis at paglulutang: kung ang isang elemento ay lumutang sa kanan, dapat na lilinis ang kanan. Ang iyong lumutang na elemento ay magpatuloy sa paglulutang, ngunit ang nililinis na elemento ay magpapakita sa ilalim nito.

Ang halimbawa na ito ay maglilinis ng paglulutang sa kanan. Ang ibig sabihin ay walang magiging paglulutang sa (div) na may kanan:

Example

div {
  clear: left;
}

Try It Yourself

Kung ang isang elemento ay mas mataas kaysa sa elemento na naglalagay nito at ito ay lumutang, ito ay

Then we can add overflow: auto; to the containing element to solve this problem:

Example

.clearfix {
  overflow: auto;
}

Try It Yourself

As long as you can control the margin and padding (otherwise you might see a scrollbar), overflow: auto clearfix will work well. However, the new modern clearfix hack technology is safer to use, and the following code is applied to most websites:

Example

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

Try It Yourself

You will learn this in the following chapters ::after Pseudo-element.