CSS 布局 - clear 和 clearfix

clear 属性

clear ບັນດາຫານວັດທີ່ຈະອະນຸຍາດລອຍກະພັນຢູ່ຂ້າງຂອງຫານວັດທີ່ປົດກະຕຸ້ນແລະຂ້າງທີ່ໃດຈະຕິດຕາມ:

clear ບັນດາປະສົມປະກອບຂອງບັນດາຂໍ້ສະເພາະຈະຕິດຕາມກັບບັນດາຂໍ້ມູນທີ່ຕິດຕາມ:

  • none - ອະນຸຍາດຫານວັດທີ່ລອຍກະພັນຢູ່ທັງສອງຂ້າງ. ຄວາມຕົກໃຈເວລາມີດັງ
  • left - ບໍ່ອະນຸຍາດຫານວັດທີ່ລອຍກະພັນຢູ່ຂ້າງຊ້າຍ
  • right - ບໍ່ອະນຸຍາດຫານວັດທີ່ລອຍກະພັນຢູ່ຂ້າງຊາຍ
  • both - ບໍ່ອະນຸຍາດຫານວັດທີ່ລອຍກະພັນຢູ່ຂ້າງຊ້າຍຫຼືຂ້າງຊາຍ
  • inherit - ຫານວັດຈະຮັບມາຈາກບັນດາຂັ້ນສັນຍາການ clear ຂອງພວກມັນ

ການນຳໃຊ້ clear ການນຳໃຊ້ທົ່ວໄປຂອງບັນດາປະສົມປະກອບຈະຢູ່ໃນຫານວັດ: float ຫຼັງຈາກບັນດາປະສົມປະກອບນັ້ນ.

ໃນການປົດກະຕຸ້ນຫຼັງການລອຍກະພັນຂອງເຂົາເຈົ້າຄວນຈະຕິດຕາມກັບການລອຍກະພັນ: ຖ້າຫານວັດທີ່ລອຍກະພັນເປັນຂ້າງຊ້າຍຈະປົດກະຕຸ້ນຂ້າງຊ້າຍ. ຫານວັດທີ່ລອຍກະພັນຈະສືບຕໍ່ລອຍກະພັນມັນແຕ່ຫານວັດທີ່ປົດກະຕຸ້ນຈະສະແດງອອກຢູ່ກ້ອງກັບຫານວັດທີ່ລອຍກະພັນ:

ຄັດຄ້ານທີ່ຫຼັງຈາກນັ້ນຈະກຳລັງປົດກະຕຸ້ນຫຼັງການລອຍກະພັນເປັນຂ້າງຊ້າຍ. ສະແດງວ່າບໍ່ມີຫານວັດທີ່ລອຍກະພັນຢູ່ຂ້າງຊ້າຍຂອງ (div):

实例

div {
  clear: left;
}

亲自试一试

clearfix Hack

ຖ້າຫານວັດທີ່ຢູ່ໃນຫຼັກສັບກະພັນມີຄວາມສູງຫຼາຍກວ່າຫຼັກສັບທີ່ກວມມັນແລະມີການລອຍກະພັນມັນຈະລອຍອອກຈາກບັນດາສັບສະໜາມຂອງມັນ:

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

实例

.clearfix {
  overflow: auto;
}

亲自试一试

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

实例

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

亲自试一试

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