CSS Float ба Clear

Float шинж чанар

Float гэдэг үг нь хөвөх гэсэн утгатай бөгөөд цаашид бид энэ хичээл дээр хөвөх гэсэн утгаар нь ашиглах болно. Float шинж чанар нь агуулгыг хуудасны хаана хөвөхийг заахад ашигладаг бөгөөд дараах утгуудтай байдаг.

• left Элемент нь савныхаа зүүн талд хөвдөг
• right Элемент нь савныхаа баруун талд хөвдөг
• none Элемент хөвөхгүй бөгөөд андагч утга нь юм
• inherit Уг элемент нь эцэг элементийн хөвөх утгыг удамшуулан авна

Float right

right утгын тусламжтай зургийг текстийн баруун талд байрлуулж үзье.

<style>
img {
  float: right;
}
</style>

Float left

left утгын тусламжтай зургийг текстийн зүүн талд байрлуулж үзье.

<style>
img {
  float: left;
}
</style>

Float none

Доорх жишээн дээр зураг ямар нэгэн байдлаар хөвөхгүй бөгөөд float: none; шинж чанар ажиллаж байна. Иймд зураг нь текст дунд гарч ирэх болно.

<style>
img {
  float: none;
}
</style>

Clear шинж чанар

Clear шинж чанарт цэвэрлэсэн элементийн хажууд ямар элементүүд, аль талд нь хөвж болохыг зааж өгдөг бөгөөд дараах утгуудтай байдаг.

• none Анхдагч утга нь бөгөөд элемент хоёр талд хөвөхийг зөвшөөрдөг.
• left Зүүн талд хөвөх элементүүдийг зөвшөөрөхгүй.
• right Баруун талд хөвөх элементүүдийг зөвшөөрөхгүй.
• both Хоёр талд хөвөх элементүүдийг зөвшөөрөхгүй.
• inherit Эцэг элементийн Clear шинж чанарын тодорхой утгыг удамшуулан авна.

Хэрэв элемент зүүн талд хөвж байвал зүүн талдаа цэвэрлэх хэрэгтэй.

<style>
.div4 {
  border: 1px solid red;
  clear: left;
}
</style>

The clearfix Hack

Хэрэв элемент нь агуулж буй элементээс өндөр бөгөөд хөвөгч буюу floated бол агуулж буй элементээс халих болно.
Дээрх асуудлыг overflow: auto; шинж чанарын тусламжтай амархан шийдвэрлэж болно.

<style>
.clearfix {
  overflow: auto;
}
</style>

overflow: auto; шинж чанар нь clearfix-д ажиллахдаа элемент агуулж буй элементийн өндөр болон margin, padding-г бүгдийн нь хянаж ажилладаг байна. /Үгүй бол overflow: auto;нь scroll үүсгэдгийг бид өмнөх хичээлээр үзсэн/

Нэмж хэлэхэд олон веб сайтууд дээрх аргыг ашиглан веб хуудасны зохион байгуулалтыг хийсэн байдаг.

<style>
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>

Grid of Boxes

float шинж чанарын тусламжтай хайрцагнуудыг зэрэгцүүлэн байршуулахад хялбар байх болно.

<style>
* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>

Сэтгэгдэлүүд