Хөвөгч онгоцны сул талуудыг анхаарч үзье. Блок болон доторлогооны элементүүд хоорондоо хэрхэн харьцдаг, тэдгээрийг хамтад нь ашиглах эсэх. Алдагдал гэж юу болох, түүнийг хэрхэн шийдвэрлэх талаар дүн шинжилгээ хийцгээе.
Сүүлийн өгүүлэлд бид хөвөгч хэрэгслийг ашиглан сайтын энгийн сүлжээг бүтээсэн хэдий ч эдгээр нь эхэн дэх текстийн элементүүдийн урсгалыг тохируулах зорилготой юм. Хөвөгч нь гурван утгатай: зүүн - элементүүд нь зүүн захад наалддаг; баруун - элементүүд баруун ирмэг дээр дарагдсан байна; байхгүй - Боодох горим идэвхгүй байна.
Хөвөгчөөр ороосон элементийг хэмжээ, жийргэвч хийх боломжтой боловч хэрэв элемент дотор нь байвал блок элемент шиг ажиллах болно.
.block1 {
хөвөх: зүүн;
өргөн: 150px;
}
.block2 {
хөвөх: баруун;
өргөн: 150px;
}
Хөвөгч хэрэгслийг ашиглахад урсгалаас унаж байгаа өөр нэг асуудал бий. Энэ нь блокууд ар араасаа гарах үед гарч ирдэг, гэхдээ тэдгээрийн зөвхөн нэг нь float шинж чанартай байдаг, дараа нь бусад блокуудыг хардаггүй тул үлдсэн хэсгүүдийн дээр байх болно. Шугаман элементүүд нь float элементүүдийг тойрон хүрээлэх боловч энэ текстийг агуулсан блок нь float элементийн дор үлдэх болно.
Гэхдээ float нь float-тай хэрхэн харьцдаг вэ?
Тэд текст шиг аашилдаг: сул зай байгаа л бол ар араасаа зогсоод дараа нь шинэ мөрөнд шилждэг. Тиймээс хөвөгч төхөөрөмжүүдийн тусламжтайгаар бид сүлжээ хийж эхлэв. Хэрэв зай үлдээгүй бол тэдгээрийг сайтын өргөнөөс хэтрүүлж, өөрөөр хэлбэл тэд хаашаа ч явахгүй.
Хэрэв хөвөгч нь энгийн блок элементүүдийг харахгүй бол блок элементүүдийг хөвөхийг зааж сургаж болно. Бид бүх талаас (эсвэл сонгосон хэсгүүдээс) боохыг идэвхгүй болгодог тодорхой өмчийг ашигладаг. Энэ нь тодорхой элемент нь хөвөгч элементийн доор унах болно.
