Ang malinaw na ari-arian ng CSS ay naging bahagi ng CSS mula noong CSS1. Hinahayaan ka nitong tukuyin kung anong mga elemento ang maaaring lumutang sa tabi ng na-clear na elemento at sa kung anong bahagi (s). Ang malinaw na ari-arian ay may limang posibleng halaga:
- wala
- kaliwa
- tama
- kapwa
- magmana
Paano Gamitin ang malinaw na Ari-arian ng CSS
Ang pinaka-karaniwang paraan upang gamitin ang malinaw na ari-arian ay pagkatapos mong magamit ang isang float na ari-arian sa isang elemento. Halimbawa:
Teksto sa tabi ng aking larawan.
Teksto na nasa ibaba ng aking larawan.
Ang lahat ng mga elemento ay default na i-clear: none; , kaya kung hindi mo nais ang ibang mga elemento na lumutang sa tabi ng isang bagay, dapat mong baguhin ang malinaw na estilo.
Kapag nililinis mo ang mga kamay, tinutugma mo ang iyong malinaw sa iyong float. Kaya kung floated mo ang elemento sa kaliwa, pagkatapos ay dapat mong i-clear sa kaliwa. Ang iyong floated elemento ay patuloy na lumulutang, ngunit ang na-clear na elemento at lahat ng bagay pagkatapos na ito ay lalabas sa ibaba nito sa web page.
Kung mayroon kang mga elemento na lumulutang sa parehong kanan at kaliwa, maaari mong i-clear ang isang panig o maaari mong i-clear ang pareho.
Paggamit ng malinaw sa Mga Layout
Ang pinaka-karaniwang paraan na ginagamit ng karamihan sa mga designer ang malinaw na ari-arian ay nasa layout ng mga elemento ng pahina . Maaari kang magkaroon ng isang imahe na lumulutang sa loob ng isang bloke ng teksto at nais ang susunod na talata na magsimula sa ibaba ng imahe, o maaari kang magkaroon ng buong hanay ng teksto na nais mong lumutang sa tabi ng isa pang pangkat ng teksto, na may ilang teksto na lumilitaw sa ibaba.
Narito ang HTML para sa isang layout sa form na ito.
Mayroon itong isang div container na may hawak na isa pang lumulutang sa kaliwa.
Isang maikling floated div
Mga nilalaman sa loob ng container div na magiging sa kanan ng floated div.
Ito ay gumagana nang maayos, na may mas maikling div lumulutang sa kaliwa ng iba pang mga nilalaman ng pangunahing div.
Maaari mong i-clear ang teksto sa tabi ng floated box sa pamamagitan lamang ng pagdagdag ng isang tag kung saan mo nais ito upang simulan ang pagsusulat sa ilalim ng floated box.
Ngunit ang problema ay dumating kapag ang floated box ay mas mahaba kaysa sa mga nilalaman sa tabi nito. Pagkatapos, tulad ng makikita mo, ang kulay ng background ng pangunahing kahon ay hindi dinadala sa ilalim ng floated box.
Sa kabutihang-palad, may isang madaling paraan upang ayusin ito: ang ari-arian. Sa pamamagitan ng pagtatakda ng pangunahing kahon sa pag-apaw: auto; ang kulay ng background ay mananatili sa tabi ng mas mahabang floated box sa pinakababa, tulad ng ipinapakita sa halimbawang ito .