Lebih kurang terapung lebih baik. Apakah nilai apungan dalam CS: GO? Teknik pembatalan bungkus

Menghuraikan sifat CSS secara terperinci terapung, ciri aplikasi dan kehalusan penggunaan, jenis kedudukan elemen HTML diberikan.

Saya ingin ambil perhatian bahawa untuk pemula, perkara di atas mungkin kelihatan mengelirukan dan rumit, tetapi saya memberi jaminan kepada anda bahawa tanpa mengetahui peraturan untuk memaparkan elemen oleh penyemak imbas, anda tidak akan menjadi pereka susun atur yang baik. Oleh itu, saya menasihati anda untuk bersabar.

Terminologi

Untuk mengelakkan kekaburan, mari kita bersetuju dengan terma.
Terapung(elemen terapung) - di bawah terapung atau elemen terapung dalam artikel bermaksud elemen blok dengan sifat CSS yang ditetapkan terapung — betul atau meninggalkan.
Tinju- Istilah tinju merujuk kepada segi empat tepat khayalan yang melampirkan setiap elemen HTML. Selaras dengan terminologi bahasa Inggeris, segi empat tepat khayalan ini akan dipanggil kotak.
Jika ia tidak begitu jelas tentang tinju, maka saya amat mengesyorkan agar anda membiasakan diri dengan lebih terperinci dengan kotak dan sifatnya, kerana istilah ini sering digunakan dalam artikel, dan yang paling penting, ia adalah asas kepada keseluruhan susun atur HTML.
Catatan. Selanjutnya dalam teks akan berlaku perkataan bergaris... Oleh itu, saya ingin menarik perhatian khusus kepada sifat atau kualiti tertentu elemen.

Jenis kedudukan elemen HTML

Untuk pembentangan yang jelas tentang perkara di atas, anda juga perlu mengetahui prinsip asas untuk memaparkan elemen dalam dokumen HTML.
Menurut w3.org, penanda WEB menggunakan tiga susun atur untuk elemen dalam dokumen Web.
Aliran biasa- Dalam CSS 2.1, aliran biasa dokumen Web termasuk elemen yang diwakili sebagai kotak kotak, elemen yang diformatkan sebagai kotak sebaris dan kedudukan relatif kotak dan kotak sebaris.
Dalam erti kata lain, aliran biasa termasuk elemen susun atur biasa yang tidak mempunyai set terapung sama dengan kiri kanan, atau kedudukan sama dengan mutlak / tetap .
Terapung- elemen terapung pertama kali diletakkan mengikut peraturan penempatan dalam aliran biasa, kemudian ia dikeluarkan dari aliran ini dan dialihkan dalam barisnya ke kiri atau ke kanan, sejauh mungkin.
Jelas tentang peraturan penting berikut. Memandangkan elemen terapung diperoleh daripada aliran biasa dokumen, kotak blok aliran biasa tidak melihatnya, tetapi kotak sebaris aliran biasa melihatnya dan mengalir di satu sisi; kotak sebaris, khususnya, termasuk teks biasa kotak blok. Ini bermakna jika, dalam penempatannya, kotak blok aliran biasa tidak memberi perhatian kepada kehadiran kotak terapung, maka kandungan kotak ini (elemen sebaris) mengalir di sekeliling elemen tersebut.
Kedudukan mutlak- dengan kedudukan mutlak, kotak dikeluarkan sepenuhnya daripada aliran normal (tidak menjejaskan yang berikutnya) dan diletakkan relatif kepada kedudukan bekasnya, iaitu elemen di mana ia berada.
Anda boleh membaca lebih sedikit tentang aliran dokumen HTML dalam artikel

Perbezaan antara apungan dan elemen kedudukan

Pada mulanya, untuk berjaga-jaga, izinkan saya mengingatkan anda apakah perbezaan antara terapung ( terapung) dan kedudukan ( kedudukan) unsur. Elemen yang agak berkedudukan dengan nilai kedudukan: relatif kekal dalam aliran biasa dokumen, tetapi dianjakkan berbanding kedudukannya, manakala elemen lain tidak terjejas dan kekal di tempatnya. Ini membolehkan elemen kedudukan relatif bertindih dengan elemen sekeliling pada halaman. Jika barang tersebut mempunyai jawatan: mutlak; atau kedudukan: tetap; kemudian ia dikeluarkan dari aliran biasa dan diletakkan mengikut peraturan kedudukan mutlak.
Elemen terapung sentiasa dialih keluar daripada aliran biasa dokumen dan menjejaskan peletakan elemen sekeliling.

Sekarang mari kita mulakan.

Apa itu terapung?

"Apung" ialah salah satu sifat CSS bagi elemen penanda peringkat blok yang menyebabkan elemen HTML terapung ke kedudukan ekstrem kiri atau kanan yang tersedia untuk penempatan dalam bekas yang mengandunginya. Jika lebar bekas tidak mempunyai ruang yang mencukupi pada garisan semasa untuk memuatkannya, ia dialihkan ke baris seterusnya sehingga ia boleh muat. Perhatikan bahawa lebar terapung sesuatu unsur ditentukan oleh kandungannya. Bergantung pada nilai yang ditetapkan terapung, elemen sebaris boleh membungkus elemen bongkah sedemikian di sepanjang salah satu sisi mendatarnya.
Harta benda terapung boleh mengambil nilai berikut: tiada(lalai), kiri, kanan dan mewarisi.

Peraturan untuk memaparkan elemen apungan

Perkara yang berlaku apabila penyemak imbas menemui elemen yang mempunyai sifat terapung Berlainan daripada tiada?
Pada mulanya, kotak sedemikian diletakkan seperti elemen biasa, kemudian ia dikeluarkan dari aliran biasa dan dialihkan ke kiri atau kanan sehingga ia bertemu dengan yang sama. terapung unsur atau sempadan bekas induknya. Jika tidak ada ruang mendatar yang mencukupi untuk elemen, penyemak imbas mengalihkannya ke baris seterusnya bekasnya.
Sejauh mana terapung item ditarik dari aliran biasa, item blok biasa tanpa set sifat terapung tidak tahu tentang kewujudannya dan diletakkan dengan cara biasa, masing-masing pada baris baru. Elemen penanda sebaris "lihat" terapung kotak dan mengalir di sekelilingnya pada salah satu sisi bergantung pada nilai - meninggalkan atau betul.
Untuk demonstrasi yang jelas tentang apa yang telah diperkatakan, saya akan memberikan contoh berikut.

Inilah yang dipaparkan oleh penyemak imbas.

Demonstrasi memaparkan elemen apungan

Sekarang mari kita fikirkan apa yang berlaku. Contoh menunjukkan 4 blok, box1 dan box2 diberikan oleh penyemak imbas secara lalai, iaitu, dalam aliran biasa, dan elemen dalaman mempunyai terapung = kiri... Untuk menjadikan contoh lebih jelas, saya menambah warna latar belakang dan padding pada blok. Jadi, pada akhirnya, blok lalai (1 dan 4) dipaparkan, seperti biasa, setiap satu pada baris baru dan menduduki keseluruhan lebar ( memandangkan tangkapan skrin penanda ditunjukkan, lebar kotak dihadkan oleh lebar imej). Yang terapung (ke-2 dan ke-3) telah dialih keluar daripada aliran biasa (iaitu, kotak pertama dan ke-4 tidak melihatnya, oleh itu "kotak biasa2" bermula di bawah 1 dari permulaan baris) dan beralih ke sempadan kiri bekas. Dan walaupun kotak blok biasa tidak melihat kotak terapung, kotak sebaris kotak terakhir (dan ini adalah teksnya) melihat kotak terapung dan mengalir di sekelilingnya dari sebelah kanan.
Seperti yang anda lihat, semuanya adalah mengikut algoritma pemaparan di atas. terapung elemen.

Bagaimana pelampung digunakan

Terdapat dua cara utama untuk menggunakan hartanah terapung.
Mari kita pertimbangkan mereka.

Balut teks di sekeliling imej.

Dalam penanda HTML, imej sering digunakan, dan hanya sebarang elemen segi empat tepat. Sifat apungan digunakan secara meluas untuk menyimpan teks di sekelilingnya dan bukannya pada baris mengikut segi empat tepat ini.

Teks membungkus imej dengan apungan: kiri

Contoh susun atur halaman dengan teks dibalut pada imej.

CSS
img.alignleft (float: left; margin: 0 10px 10px 0)

Dalam kod di atas dan elemen terapung img dan teks pembalut berada di dalam bekas yang sama hlm.
Ambil perhatian bahawa padding telah ditambahkan pada CSS kiri dan kanan untuk elemen terapung. Ia adalah amalan biasa untuk menambah ruang antara imej dan teks sekeliling.

Susun atur lajur

Harta benda Terapung membenarkan dua elemen blok diletakkan bersebelahan antara satu sama lain dan bukannya bermula pada baris baharu. Sifat terapung ini sangat berguna untuk mencipta lajur dalam dokumen. Untuk mendapatkan susun atur dengan 2 lajur, sudah cukup untuk terapung (iaitu menetapkan sifat apungan) kepada dua DIV.
Contoh mencipta susun atur 2 lajur menggunakan apungan.

Html
‹Div id =" pembalut "›
‹Div id =" left-column "› ‹div›
‹Div id =" lajur kanan "› ‹/div›
‹/Div›

CSS
# lajur kiri (terapung: kiri)
# lajur kanan (terapung: kiri)

Dalam contoh, kedua-dua DIV dalam diapungkan ke kiri, menghasilkan 2 lajur. Anda juga harus memastikan bahawa jumlah lebar dua lajur dalam (div) tidak melebihi lebar kotak induk, jika tidak lajur kedua akan melompat ke kedudukan baharu di bawah lajur pertama.
Dengan menambahkan div pengepala pada 2 lajur dan div pengaki menggunakan sifat jelas, anda akan mendapat susun atur 2 lajur yang ringkas dan cantik.

Dan satu lagi nasihat. Sentiasa tetapkan lebar elemen terapung, jika tidak, anda boleh mendapat akibat yang tidak diingini.

Mengatasi harta apungan

Selalunya apabila bekerja dengan terapung kadang-kadang perlu bahawa elemen markup berikutnya tidak terletak di sebelah arus terapung, tetapi, seperti biasa, pada baris seterusnya, iaitu, anda perlu kembali ke penempatan elemen mengikut aliran biasa.
Ini selalunya dicapai dengan menggunakan harta tersebut jelas... Harta benda jelas mengambil nilai kiri, kanan, kedua-duanya, tiada(lalai), dan mewarisi... Dalam amalan, 3 nilai pertama digunakan, dan dalam kebanyakan kes anda akan gunakan jelas: kedua-duanya.
Selalunya, mungkin, jelas digunakan untuk menetapkan div pengaki di bawah 2 atau 3 lajur terapung anda.

Berhati-hati. Apabila digunakan selepas elemen terapung dalam kotak baharu, peraturan dengan jelas, anda mengembalikan kotak ini kepada aliran biasa, tetapi pada masa yang sama hartanya margin-top berhenti kerja. Selalunya keadaan ini diperbetulkan dengan meletakkan div kosong dengan harta di hadapan kotak yang diperlukan dalam aliran biasa jelas —

... Demi keadilan, perlu diperhatikan bahawa teknik sedemikian dianggap betul secara teknikal, tetapi secara semantik tidak betul, kerana kelihatan kosong dalam dokumen div bekas.

Bekas terapung

Perkara pertama yang perlu dilakukan apabila menggunakan bekas untuk elemen terapung ialah memastikan bekas itu cukup lebar untuk memuatkan elemen bersebelahan antara satu sama lain. Jika anda menetapkan pada dua elemen harta itu terapung: kiri untuk mencipta susun atur 2 lajur, dan jumlah lebar elemen adalah lebih besar daripada lebar bekas, maka salah satu elemen akan melompat ke baris seterusnya. Ini akan berlaku disebabkan oleh fakta bahawa lajur kedua tidak akan mempunyai ruang yang cukup untuk berdiri di dalam kotak induk bersebelahan dengan lajur pertama. Di bawah adalah gambar yang menggambarkan situasi yang sama.

Kami menyebut sebelum ini bahawa unsur terapung dialih keluar daripada aliran biasa dokumen. Ini membawa kepada masalah yang menarik dan mengelirukan di mana semua elemen di dalam bekas terapung. Ini biasanya berlaku, sebagai contoh, apabila dalam bekas div pengepala halaman Web terdapat imej logo dengan harta terapung: kiri... Dalam tajuk juga, biasanya dengan bantuan harta imej latar belakang sebarang imej latar belakang disediakan. Ini menambah kepada bekas dalam aliran biasa, yang mengandungi unsur terapung dan unsur kosong dalam aliran biasa, memandangkan imej dipaparkan di latar belakang. Masalahnya ialah div pengepala mengandungi hanya satu elemen tidak kosong - imej logo terapung yang telah terkeluar daripada aliran biasa. Oleh itu pelayar menganggap div tajuk kosong dan menetapkan ketinggiannya kepada sifar. Selalunya dikatakan bekas itu runtuh. Terdapat beberapa cara untuk menyelesaikan masalah ini. Anda boleh menetapkan ketinggian div bekas secara eksplisit kepada sekurang-kurangnya ketinggian imej. Ini akan berfungsi dengan baik untuk tajuk seperti contoh di atas, tetapi atas beberapa sebab ini tidak selalu boleh dilakukan. Kadangkala tambahkan div kosong dengan set sifat jelas untuk mengelakkan perkara berikut daripada terapung.

Html
‹Div class =" clear "› ‹/div›

CSS
.jelas (jelas: kedua-duanya;)

Ini berguna jika anda dibenarkan untuk mempunyai beberapa ruang putih selepas unsur terapung, kerana sesetengah pelayar untuk div kosong mungkin mempunyai nilai akhir lalai untuk ketinggian, jidar, padding dan lain-lain.
Terdapat juga kaedah untuk menggunakan harta itu melimpah dalam elemen induk. Biasa guna limpahan: tersembunyi tetapi bergantung pada situasi yang anda boleh gunakan limpahan: auto atau limpahan-y bukannya menggunakan harta ini kedua-dua cara. Menggunakan harta melimpah melindungi bekas induk daripada runtuh.

Isu terapung

Selain masalah bekas runtuh, harta apungan mempunyai beberapa masalah lain.
Versi lama Internet Explorer mempunyai pepijat lekukan berganda ( margin). Jika unsur-unsur mengalir dalam arah yang sama dan unsur-unsur juga ditambah margin dalam arah yang sama (kiri / kiri atau kanan / kanan), IE menggandakan magnitud margin... Penyelesaian mudah ialah menetapkan harta paparan: sebaris untuk unsur terapung, dengan cara ini, harta ini membantu untuk menyingkirkan pepijat keldai berbahaya yang lain. Sebagai alternatif, anda boleh menggunakan ulasan bersyarat untuk menetapkan khusus margin untuk IE atau untuk versi individu IE.
Masalah lain ialah menambah elemen di dalam elemen terapung, di mana lebar elemen tambahan adalah lebih besar daripada lebar bekas. Anda boleh, sebagai contoh, menambah imej pada bahagian dalam elemen terapung supaya lebar imej lebih besar daripada lebar bekas. Bergantung pada penyemak imbas, ini boleh menyebabkan apungan anda menjadi lebih lebar daripada yang dimaksudkan, atau kandungan bertindih dengan imej anda. Pastikan elemen di dalam apungan tidak melebihi lebar apungan.
Terdapat juga masalah pelapik bawah hilang ( margin-bawah). Pelapik bawah unsur terapung di dalam terapung lain boleh diabaikan. Penyelesaiannya adalah dengan menggunakan padding bukannya margin jika itu berlaku.

Jumlah terapung

Apabila mempelajari CSS, pemula cenderung kepada kedudukan mutlak dan relatif kerana ia kelihatan lebih mudah. Tetapi biasanya amalan terbaik untuk menggunakan apungan. Jika anda mengingati beberapa perkara penting, anda akan mempunyai pemahaman dan kawalan yang baik tentang elemen terapung dalam reka letak anda.

• Elemen terapung dibentangkan dalam aliran biasa dokumen, kemudian terapung ke kiri atau kanan dalam elemen induk, dan dialih keluar daripada aliran biasa dokumen.
• Tag nilai terapung secara automatik menjadi elemen blok.
• Kotak blok dengan dipasang terapung terletak bersebelahan selagi ada ruang yang cukup untuk mereka. Jika tidak ada ruang yang mencukupi dalam bekas, ia akan muncul di bawah unsur terapung.
• Lebar kotak dengan harta yang ditetapkan terapung ditentukan oleh lebar kandungannya. Adalah disyorkan untuk menetapkan lebar apungan untuk elemen semasa menandakan, jika tidak, hasilnya mungkin tidak dapat diramalkan, pengesyoran tidak terpakai pada imej, kerana lebarnya tersirat untuknya.
• Elemen terapung dan diletakkan adalah berbeza dan berkelakuan berbeza. Anda tidak boleh menggunakan sifat terapung dan kedudukan dalam satu item.
• Untuk menetapkan semula sifat bungkus untuk elemen berikutnya gunakan sifat CSS jelas.
• Terapung kotak itu dibawa keluar daripada aliran utama, jadi elemen blok dalam aliran biasa dibentangkan seolah-olah ia tidak ada, tetapi kotak sebaris elemen tersebut memberi ruang kepada blok terapung.
• Bekas dengan unsur terapung secara eksklusif mempunyai ketinggian sifar, kerana elemen apungan dikeluarkan daripada aliran biasa, jadi ibu bapa menganggapnya kosong. Terdapat cara untuk memerangi kesan ini tanpa markup tambahan, anda boleh membiasakan diri dengan mereka, sebagai contoh,.
• Tidak seperti unsur arus perdana, sempadan menegak terapung kotak tidak digabungkan dengan sempadan kotak jiran.
• Cari penyelesaian yang paling sesuai untuk anda menyelesaikan isu paparan unsur apungan yang betul dalam Internet Explorer.

Mudah-mudahan perkara di atas akan membantu anda menyelesaikan beberapa kekeliruan apabila menggunakan sifat CSS. terapung.

Menentukan sisi mana elemen itu akan dijajarkan, dengan elemen lain mengalir di sekelilingnya dari sisi lain. Apabila sifat apungan tiada, elemen itu dipaparkan pada halaman seperti biasa, sambil membenarkan satu baris teks mengalir berada pada baris yang sama dengan elemen itu sendiri.

info ringkas

Sintaks

terapung: kiri | betul | tiada

Jawatan

	Penerangan	Contoh
<тип>	Menunjukkan jenis nilai.	<размер>
A && B	Nilai mesti dipaparkan dalam susunan yang ditunjukkan.	<размер> && <цвет>
A | B	Menunjukkan bahawa hanya satu daripada nilai yang dicadangkan harus dipilih (A atau B).	biasa | topi kecil
A || B	Setiap nilai boleh digunakan secara bersendirian atau bersama-sama dengan yang lain dalam sebarang susunan.	lebar || kira
	Nilai kumpulan.	[tanam || menyeberang]
*	Ulang sifar atau lebih kali.	[,<время>]*
+	Ulang satu atau lebih kali.	<число>+
?	Jenis, perkataan atau kumpulan yang ditentukan adalah pilihan.	sisipan?
(A, B)	Ulang sekurang-kurangnya A, tetapi tidak lebih daripada B kali.	<радиус>{1,4}
#	Ulang satu kali atau lebih, dipisahkan dengan koma.	<время>#

Nilai-nilai

kiri Menjajarkan elemen ke kiri, dan semua elemen lain, seperti teks, mengalir ke kanan. kanan Menjajarkan elemen ke kanan, dan semua elemen lain mengalir ke kiri. tiada Balut di sekeliling elemen tidak ditentukan.

Kotak pasir

Winnie the Pooh sentiasa tidak suka minum sedikit, terutamanya pada pukul sebelas pagi, kerana pada masa ini sarapan pagi telah lama berakhir, dan makan malam tidak terfikir untuk bermula. Dan, tentu saja, dia sangat gembira melihat Arnab mengeluarkan cawan dan pinggan.

img (float: ((playgroundValue));)

Contoh

Behaviorisme, walau bagaimanapun paradoksnya, mencerahkan rangsangan yang disublimasikan, contohnya, Richard Bandler menggunakan perubahan dalam submodaliti untuk membina keadaan yang berkesan.

Hasil daripada contoh ini ditunjukkan dalam Rajah. 1.

nasi. 1. Menggunakan sifat apungan

Model Objek

Sebuah objek.style.cssFloat

Catatan

Internet Explorer 6 melihat ralat padding kiri atau kanan berganda untuk elemen terapung yang bersarang dalam elemen induk. Pelapik yang bersebelahan dengan sisi ibu bapa digandakan. Masalahnya biasanya diselesaikan dengan menambahkan paparan: sebaris pada elemen terapung. Penyemak imbas ini juga menambah padding 3px (dipanggil "pepijat tiga piksel") dalam arah yang diberikan oleh nilai apungan.

Spesifikasi

Setiap spesifikasi melalui beberapa peringkat kelulusan.

• Syor - Spesifikasi ini telah disahkan oleh W3C dan disyorkan sebagai standard.
• Syor Calon ( Cadangan yang mungkin) - kumpulan yang bertanggungjawab untuk piawaian berpuas hati bahawa ia selaras dengan objektifnya, tetapi bantuan komuniti pembangun diperlukan untuk melaksanakan piawaian tersebut.
• Cadangan Cadangan ( Cadangan yang dicadangkan) - Pada ketika ini, dokumen tersebut diserahkan kepada Majlis Penasihat W3C untuk kelulusan akhir.
• Draf Kerja - Versi draf yang lebih matang selepas perbincangan dan pindaan untuk semakan komuniti.
• Draf editor ( Draf editorial) - versi draf standard selepas diedit oleh editor projek.
• Draf ( Spesifikasi draf) ialah draf pertama piawaian.

pelayar

pelayar

Konvensyen berikut digunakan dalam jadual penyemak imbas.

Penerangan

Menentukan sisi mana elemen itu akan dijajarkan, dengan elemen lain mengalir di sekelilingnya dari sisi lain. Apabila sifat apungan tiada, elemen itu dipaparkan pada halaman seperti biasa, sambil membenarkan satu baris teks mengalir berada pada baris yang sama dengan elemen itu sendiri.

Sintaks

terapung: kiri | betul | tiada | mewarisi

Nilai-nilai

kiri Menjajarkan elemen ke kiri, dan semua elemen lain, seperti teks, mengalir ke kanan. kanan Menjajarkan elemen ke kanan, dan semua elemen lain mengalir ke kiri. tiada Tiada lilitan di sekeliling elemen dinyatakan. mewarisi Mewarisi nilai daripada ibu bapa.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

Hasil daripada contoh ini ditunjukkan dalam Rajah. 1.

nasi. 1. Menggunakan sifat apungan

Model Objek

document.getElementById ("elementID") .style.styleFloat

document.getElementById ("elementID") .style.cssFloat

pelayar

Internet Explorer 6 melihat ralat padding kiri atau kanan berganda untuk elemen terapung yang bersarang dalam elemen induk. Pelapik yang bersebelahan dengan sisi ibu bapa digandakan. Masalahnya biasanya diselesaikan dengan menambahkan paparan: sebaris pada elemen terapung. Penyemak imbas ini juga menambah padding 3px (dipanggil "pepijat tiga piksel") dalam arah yang diberikan oleh nilai apungan.

Internet Explorer sehingga dan termasuk versi 7.0 tidak menyokong nilai warisan.

Beberapa tahun yang lalu, apabila pembangun mula beralih ke HTML tanpa jadual, sifat apungan CSS tiba-tiba mengambil peranan yang sangat penting. Sebab apungan menjadi sangat biasa ialah, secara lalai, elemen blok tidak berbaris bersebelahan antara satu sama lain dalam format berasaskan lajur. Memandangkan lajur diperlukan dalam hampir setiap skema CSS, sifat ini telah terbiasa - malah disalahgunakan.

Harta benda terapung dalam CSS, membenarkan pembangun memasukkan lajur seperti jadual dalam penanda HTML tanpa menggunakan jadual. Jika bukan kerana harta itu terapung maka susun atur CSS tidak akan dapat dilakukan selain daripada menggunakan kedudukan mutlak dan relatif - yang akan menjadi ceroboh dan membuat reka letak janggal untuk dikekalkan.

Dalam artikel ini kami akan memberitahu anda, apa itu harta terapung dan bagaimana ia mempengaruhi elemen dalam konteks tertentu... Kami juga akan menyerlahkan beberapa perbezaan yang mungkin ada pada harta ini dalam penyemak imbas yang paling biasa digunakan. Akhir sekali, kami akan menunjukkan beberapa aplikasi praktikal harta itu terapung... Ia juga harus menyediakan perbincangan yang komprehensif dan menyeluruh tentang harta ini dan kesannya terhadap pembangunan CSS.

Takrif dan sintaks sifat CSS Float

Tujuan sifat apungan adalah untuk menolak elemen blok ke kiri atau kanan, mengeluarkannya daripada aliran dokumen. Ini membolehkan kandungan yang mengalir membalut secara semula jadi di sekeliling elemen terapung. Konsep ini serupa dengan apa yang anda lihat setiap hari dalam cetakan, di mana gambar dan elemen grafik lain dijajarkan pada kedua-dua sisi dan kandungan (biasanya teks) mengalir secara semula jadi di sekeliling elemen yang dijajarkan di sekeliling tepi kiri atau kanan.

Dalam imej di atas, bahagian "Pembaca Tapak" majalah .net, dengan 3 foto pembaca dijajarkan ke kiri dalam lajur mereka dengan teks yang dibalut di sekeliling imej. Ini ialah idea asas di sebalik sifat apungan dalam susun atur CSS, dan ia menunjukkan satu cara yang digunakan dalam reka bentuk jadual.

Keberkesanan menggunakan apungan dalam susun atur berbilang lajur telah dijelaskan oleh Douglas Bowman pada tahun 2004 dalam pembentangan klasiknya, No More Tables:

Bowman menerangkan prinsip di sebalik susun atur tanpa hamparan, menggunakan tapak lama Microsoft sebagai rujukan. Float digunakan dengan jelas dalam reka bentuk semula olok-oloknya bagi penanda Microsoft.

Sintaks

Sifat Float boleh mengambil salah satu daripada 4 nilai: kiri (kiri), kanan (kanan), tiada penjajaran (tiada) dan diwarisi (warisi). Ini diisytiharkan seperti yang ditunjukkan dalam kod di bawah:

#bar sisi (float: kiri;)

#bar sisi ( terapung: kiri;

Nilai yang paling biasa digunakan ialah kiri dan kanan. Nilai apungan tiada atau awal untuk mana-mana elemen dalam halaman HTML ialah lalai. Nilai warisan, yang boleh digunakan pada hampir setiap sifat CSS, tidak berfungsi dalam versi Internet Explorer, termasuk 7.

Sifat apungan tidak memerlukan sebarang sifat lain untuk digunakan pada elemen apungan, walau bagaimanapun, untuk berfungsi dengan betul, apungan akan berfungsi dengan lebih cekap dalam keadaan tertentu.

Secara amnya, elemen terapung sepatutnya mempunyai lebar yang ditetapkan secara eksplisit(melainkan ia adalah elemen yang diganti, seperti imej). Ini memastikan bahawa apungan berkelakuan seperti yang diharapkan dan membantu mengelakkan masalah dalam sesetengah penyemak imbas.

#sidebar (terapung: kiri; lebar: 350px;)

#bar sisi ( terapung: kiri; lebar: 350px;

Ciri-ciri unsur terapung

Di bawah ialah senarai kelakuan elemen terapung, mengikut spesifikasi CSS2:

Kotak terapung kiri akan diimbangi kiri ke tepi kirinya (atau sempadan tepi jika tiada tepi) menyentuh sama ada tepi kandungan kotak atau tepi kotak terapung lain

Jika saiz bongkah terapung melebihi ruang mendatar yang ada, maka bongkah terapung akan dianjak ke bawah

Elemen bongkah tidak berkedudukan dan tidak terapung bertindak seperti elemen terapung, i.e. berada di luar aliran dokumen

Tepi bongkah terapung tidak akan sejajar dengan tepi bongkah bersebelahan

Unsur akar ( ) tidak boleh diapungkan

Elemen sebaris yang terapung ditukar kepada elemen blok

Terapung dalam amalan

Kes penggunaan yang paling biasa digunakan untuk sifat terapung ialah imej terapung dengan teks membalutnya. Sebagai contoh:

Ultricies Aenean mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Fermentum Aenean, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

CSS yang digunakan pada imej dalam kotak di atas kelihatan seperti ini:

img (float: kiri; jidar: 0 15px 5px 0; sempadan: pepejal 1px #bbb;)

img ( terapung: kiri; jidar: 0 15px 5px 0; sempadan: pepejal 1px #bbb;

Satu-satunya harta yang boleh mencapai kesan ini ialah harta apungan. Harta lain (margin dan sempadan) ada atas sebab estetik. Elemen lain dalam blok (tag

Dengan teks di dalamnya) tidak memerlukan sebarang gaya.

Seperti yang dinyatakan sebelum ini, elemen terapung disingkirkan daripada aliran dokumen, dan elemen blok lain kekal dalam aliran, bertindak seolah-olah elemen terapung tidak ada di sana. Ini ditunjukkan secara visual di bawah:

Kotak ini diapungkan ke kiri

ini

Elemen mempunyai warna latar belakang yang berbeza untuk menunjukkan bahawa ia menjangkau lebar induknya, mengabaikan elemen terapung. Teks sebaris ini, walau bagaimanapun, membungkus kotak terapung.

Dalam contoh di atas

elemen peringkat blok, jadi ia mengabaikan elemen terapung yang merentangi lebar bekas (tolak padding). Semua elemen tidak terapung jenis blok akan berkelakuan serupa.

Teks dalam perenggan adalah sebaris, jadi ia membungkus elemen terapung. Blok terapung juga diberikan parameter margin untuk mengimbanginya daripada perenggan, menjadikannya jelas secara visual supaya elemen perenggan mengabaikan blok terapung.

Membersihkan terapung

Masalah kedudukan dengan terapung biasanya diselesaikan dengan menggunakan sifat CSS yang jelas, yang membolehkan anda "mengosongkan" elemen terapung di sebelah kiri atau kanan, atau kedua-dua belah pihak.

Mari kita lihat contoh biasa - pengaki melilit sebelah kanan 2 penanda klon:

Lajur kiri terapung ke kiri

Jika anda melihat halaman IE6 dan IE7, anda tidak akan melihat sebarang masalah. Lajur kiri dan kanan berada di tempatnya, dan pengaki berada di bahagian bawah. Tetapi dalam Firefox, Opera, Safari dan Chrome, anda akan melihat slaid pengaki tidak pada tempatnya. Ini disebabkan oleh penggunaan terapung pada lajur. Ini adalah tingkah laku yang betul, walaupun ia lebih bermasalah. Untuk menyelesaikan masalah ini, kami menggunakan sifat jelas yang disebutkan di atas, berbanding dengan pengaki:

#footer (jelas: kedua-duanya;)

#footer ( jelas: kedua-duanya;

Hasilnya ditunjukkan di bawah:

Lajur kiri terapung ke kiri

Lajur kanan juga terapung ke kiri

Sifat jelas akan mengosongkan elemen terapung sahaja, jadi menggunakan jelas: kedua-dua lajur tidak akan menyebabkan pengaki jatuh ke bawah, kerana pengaki bukan unsur terapung.

Harta yang jelas hanya akan mengosongkan unsur terapung. Penggunaan clear ialah kedua-dua lajur tidak akan meninggalkan pengaki kerana ia bukan elemen terapung.

Oleh itu, gunakan jelas pada elemen tidak terapung, dan kadangkala juga elemen terapung, untuk menjadikan elemen halaman mengambil tempatnya.

Mengunci ibu bapa

Salah satu ciri yang paling biasa bagi penanda apungan ialah "keciciran" induk. Ini ditunjukkan dalam contoh di bawah:

Pellentesque habitant morbi tristique senectus et netus and malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Ambil perhatian bahawa bahagian bawah imej terapung muncul di luar induknya. Induk tidak dikembangkan sepenuhnya untuk mengandungi imej terapung. Ini disebabkan oleh apa yang kita bincangkan sebelum ini: elemen terapung berada di luar aliran semula jadi dokumen, walaupun semua elemen blok dipaparkan, tetapi elemen terapung tidak ada di sana. Ini bukan pepijat CSS, semuanya mengikut spesifikasi CSS. Semua penyemak imbas melakukan perkara yang sama dalam contoh ini. Saya mesti mengatakan bahawa, dalam contoh ini, menambah lebar bekas boleh menghalang masalah dalam IE, tetapi masalah itu perlu diselesaikan untuk Firefox, Opera, Safari atau Chrome juga.

Penyelesaian 1: Terapung untuk bekas

Cara paling mudah untuk menyelesaikan masalah ini ialah mengapungkan elemen induk:

Pellentesque habitant morbi tristique senectus et netus and malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Bekas itu kini mengembang untuk menampung semua anak-anaknya. Malangnya, pembetulan ini hanya akan berfungsi dalam bilangan kes yang terhad, kerana induk terapung boleh mempunyai kesan yang tidak diingini pada reka letak anda.

Penyelesaian 2: Menambah Penanda Tambahan

Ini adalah kaedah yang tidak digunakan, tetapi pilihan yang lebih mudah. Cuma tambahkan elemen tambahan pada bahagian bawah bekas dan "kosongkan"nya. Beginilah rupa HTML selepas melaksanakan kaedah ini:

XHTML

"//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg" lebar = "200" tinggi = "222" alt = "" /> Pellentesque habitant morbi tristique senectus et netus and malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Dan akibatnya, CSS digunakan pada elemen baharu:

Clearfix (jelas: kedua-duanya;)

Clearfix ( jelas: kedua-duanya;

Anda juga boleh melakukan ini dengan
tag dengan gaya aktif. Sama ada cara, anda mendapat hasil yang diingini: bekas induk akan berkembang untuk merangkumi semua anak-anaknya. Kaedah ini tidak disyorkan, bagaimanapun, kerana ia menambahkan kod bukan semantik pada penanda anda.

Penyelesaian 3: unsur pseudo selepas

The: after pseudo-element menambah elemen pada halaman HTML yang diberikan. Teknik ini telah digunakan secara meluas untuk menyelesaikan masalah pembersihan terapung. Inilah rupa CSS:

Pembetulan jelas: selepas (kandungan: "."; Paparan: blok; ketinggian: 0; jelas: kedua-duanya; keterlihatan: tersembunyi;)

Pembetulan jelas: selepas ( kandungan: "." ; paparan: blok; ketinggian: 0; jelas: kedua-duanya; penglihatan: tersembunyi;

Kelas CSS "clearfix" digunakan pada mana-mana bekas yang telah mengapungkan kanak-kanak dan tidak berkembang untuk memasukkannya.

Tetapi kaedah ini tidak berfungsi untuk Internet Explorer sebelum versi 7, jadi untuk IE anda perlu menggunakan salah satu daripada pilihan berikut:

Clearfix (paparan: inline-block;). Clearfix (zum: 1;)

Clearfix ( paparan: inline-block; Clearfix ( zum: 1;

Bergantung pada jenis masalah, anda sedang berurusan dengan salah satu daripada dua penyelesaian yang akan menyelesaikan masalah dalam Internet Explorer. Perlu diingatkan bahawa sifat zum bukanlah sifat standard Microsoft dan oleh itu CSS anda akan menjadi tidak sah.

Oleh kerana: selepas pseudo-element tidak berfungsi dalam IE6 / 7, kami mendapat kod yang agak kembung dan rumit, dan gaya tambahan yang tidak sah untuk IE sahaja diperlukan, jadi penyelesaian ini bukan cara terbaik, tetapi mungkin yang terbaik yang telah kami pertimbangkan.

Penyelesaian 4: Harta limpahan

Setakat ini, cara terbaik dan termudah untuk menyelesaikan masalah keciciran ibu bapa ialah menambah limpahan: tersembunyi atau limpahan: auto kepada elemen induk. Ia jelas, mudah diselenggara, berfungsi dalam hampir semua penyemak imbas dan tidak menambah penanda yang tidak perlu.

Ambil perhatian bahawa saya berkata "hampir" dalam semua penyemak imbas. Ini kerana ia tidak berfungsi dalam IE6. Tetapi, dalam banyak kes, bekas induk akan mempunyai lebar yang ditetapkan, yang membetulkan masalah dalam IE6. Jika bekas induk tidak mempunyai lebar, anda boleh menambah gaya IE6 sahaja dengan kod berikut:

// Pembetulan ini adalah untuk IE6 sahaja .clearfix (ketinggian: 1%; limpahan: boleh dilihat;)

// Pembetulan ini adalah untuk IE6 sahaja Clearfix ( ketinggian: 1%; limpahan: nampak;

Dalam IE6, sifat ketinggian salah dianggap sebagai ketinggian min, jadi ini memaksa bekas untuk memasukkan anak-anaknya. Sifat Limpahan kemudian ditetapkan semula kepada "kelihatan" untuk memastikan kandungan itu tidak disembunyikan atau ditatal.

Satu-satunya kelemahan untuk menggunakan kaedah limpahan (dalam mana-mana penyemak imbas) ialah kemungkinan kandungan elemen akan mempunyai bar skrol atau menyembunyikan kandungan. Jika terdapat mana-mana elemen dengan jidar negatif atau kedudukan mutlak dalam induk, maka ia akan disembunyikan jika ia keluar dari sempadan induk, jadi kaedah ini harus digunakan dengan berhati-hati. Perlu diingatkan juga bahawa jika elemen yang terkandung mempunyai ketinggian tertentu atau ketinggian min, maka anda pasti tidak akan dapat menggunakan kaedah limpahan.

Jadi bukan mudah untuk merentas pelayar masalah. Tetapi hampir semua masalah pembersihan apungan boleh diselesaikan dengan salah satu kaedah di atas.

Pepijat berkaitan terapung dalam Internet Explorer

Selama bertahun-tahun, terdapat banyak artikel disiarkan di web membincangkan ralat apungan biasa dalam penanda CSS. Kesemua mereka, tidak menghairankan, menangani masalah khusus untuk Internet Explorer. Di bawah, anda akan menemui senarai pautan ke beberapa artikel yang membincangkan isu berkaitan apungan:

Menukar sifat apungan dengan JavaScript

Untuk menukar nilai CSS dalam JavaScript, anda mesti mengakses gaya objek dengan menukar sifat CSS yang dimaksudkan kepada "Camel case" Contohnya, sifat CSS "margin-left" menjadi marginLeft, sifat warna latar belakang menjadi BackgroundColor dan sebagainya. pada. Tetapi dengan sifat apungan, ia berbeza, kerana perkataan apungan sudah dikhaskan dalam JavaScript. Oleh itu, perkara berikut akan menjadi salah:

Gaya. styleFloat = "kiri";

// Untuk semua pelayar lain

myDiv. gaya. cssFloat = "kiri";

Penggunaan praktikal Float

Terapung boleh digunakan untuk menyelesaikan pelbagai masalah dalam penanda CSS. Beberapa contoh diterangkan di sini.

2-lajur, lebar tetap

3 Lajur, Susun Atur Tinggi Sama

Imej terapung dengan tajuk.

Sama seperti apa yang kita bincangkan sebelum ini dalam "Apung dalam Amalan," Reka Bentuk Max menerangkan cara mengapungkan imej dengan tajuk, membenarkan teks melilit secara semula jadi di sekelilingnya.

Navigasi mendatar dengan senarai tidak tersusun

Sifat apungan ialah komponen utama dalam pengekodan bar navigasi mendatar berasaskan sprite. Chris Spooner dari Line25 menerangkan cara membuat Menu Kehebatan yang menandakan

memegang butang navigasi menggunakan apungan: kiri:

Untuk menunjukkan kepentingan sifat apungan dalam contoh ini, berikut ialah tangkapan skrin imej yang sama selepas menggunakan pepijat api untuk mengalih keluar apungan: kiri:

Galeri Foto Berasaskan Grid

Penggunaan mudah sifat apungan adalah untuk terapung: meninggalkan satu siri foto yang terkandung dalam senarai tidak tersusun, yang mendapat hasil yang sama seperti yang mungkin anda lihat dalam reka letak jadual.

Halaman produk utama Kanada (lihat imej di atas) memaparkan produknya dalam format grid di sebelah bar sisi. Foto dipaparkan sebagai senarai tidak tertib dengan sifat terapung, untuk semua

elemen ditetapkan untuk terapung: kiri. Ini berfungsi lebih baik daripada grid, kerana bilangan foto dalam galeri boleh berubah dan penanda tidak akan terjejas.

Halaman futon Paragon Furniture (lihat imej di atas) mempunyai satu lagi contoh halaman produk menggunakan senarai tidak tersusun dengan tag terapung

.

Halaman hasil carian iStockphoto (lihat imej di atas) juga mempunyai grid foto berstruktur, di sini foto mengandungi terapung: kiri

tag, bukan

tag.

Penjajaran medan dengan butang

Memodelkan elemen borang lalai untuk penyemak imbas yang berbeza boleh menjadi masalah. Selalunya dalam satu medan borang, seperti borang carian, anda perlu meletakkan item di sebelah butang hantar.

Dalam reka bentuk web moden, hartanah terapung digunakan pada hampir setiap langkah. Tetapi di sebalik kelaziman ini, tidak semua orang memahami mekanisme operasi blok terapung, tingkah laku mereka dan apa akibat daripada penggunaannya.

Apakah "terapung"?

Terapung ia adalah harta kedudukan CSS. Untuk memahami intipati dan asalnya, anda perlu mengalihkan perhatian anda kepada reka bentuk cetakan. Dalam reka letak bercetak, imej boleh diletakkan supaya teks mengalir di sekelilingnya. Ini biasanya dipanggil " bungkus teks".

Dalam susun atur halaman, blok yang mengandungi teks boleh ditentukan untuk digunakan balut teks di sekeliling imej atau abaikan pembalut. Mengabaikan pembalut teks akan membenarkan perkataan mengalir ke atas imej seolah-olah ia tidak ada. Ini adalah perbezaan sama ada imej adalah sebahagian daripada aliran pada halaman atau tidak. Dalam reka bentuk web, semuanya sangat serupa.

Dalam reka bentuk web, elemen dengan sifat CSS digunakan padanya terapung akan berkelakuan seperti imej dengan teks dibalut di sekelilingnya dalam reka letak bercetak. Elemen terapung kekal sebagai sebahagian daripada aliran halaman web. Ini sama sekali tidak sama dengan elemen kedudukan mutlak, yang dialih keluar daripada aliran, seolah-olah dalam susun atur cetakan blok teks diarahkan untuk mengabaikan pembalut di sekeliling imej. Elemen yang diletakkan secara mutlak tidak menjejaskan peletakan elemen lain, dan elemen lain tidak menjejaskan peletakannya.

Menetapkan harta terapung untuk elemen menggunakan CSS kelihatan seperti ini:

#bar sisi (float: kanan;)

Terdapat empat nilai yang sah untuk harta itu terapung - meninggalkan, betul, tiada, mewarisi... Dua yang pertama, meninggalkan dan betul nyatakan arah lokasi - kiri dan kanan, masing-masing. tiada- nilai lalai, menunjukkan bahawa elemen tidak terapung dan mewarisi mengarahkan elemen untuk mewarisi nilai harta terapung daripada unsur induk.

Untuk apa pelampung digunakan?

Selain daripada contoh mudah membungkus teks di sekeliling imej, terapung boleh digunakan untuk membuat reka letak web.

Terapung, juga berguna untuk elemen susun atur kecil. Sebagai contoh, ambil coretan kecil halaman web ini. Jika kita menetapkan harta terapung untuk imej avatar kecil, maka apabila saiz imej berubah, pembalut akan berubah mengikut dimensi imej baru:

Susun atur yang sama boleh dilaksanakan menggunakan kedudukan relatif bekas dan kedudukan mutlak avatar dan teks di dalamnya. Tetapi dalam susun atur yang dilaksanakan mengikut skema ini, mengubah saiz imej tidak akan menjejaskan blok teks, kerana elemen dengan kedudukan mutlak tidak menjejaskan elemen lain dan elemen lain tidak menjejaskannya.

Tetapkan semula bungkus

Jelas harta yang berkaitan dengan harta terapung... Elemen dengan harta yang ditetapkan jelas tidak akan bergerak ke atas apabila mengalir di sekeliling elemen dengan sifat yang ditetapkan terapung tetapi akan terapung ke bawah tanpa menghiraukan pembalut. Dan sekali lagi, ilustrasi yang akan menerangkan segala-galanya tanpa berlengah lagi.

Dalam contoh di atas, bar sisi terapung di sebelah kanan blok kandungan utama. Pengaki telah dialihkan ke tempat kosong di bawah bar sisi, melingkari blok kandungan utama. Untuk mengatasi masalah ini, anda mesti menentukan nilai untuk clear: kedua-dua sifat "footer" untuk "kosongkan" pembalut di sekeliling kedua-dua lajur.

#footer (jelas: kedua-duanya;)

Harta benda jelas mempunyai empat makna. Kedua-duanya digunakan untuk menetapkan semula bungkus dalam kedua-dua arah. Meninggalkan dan Betul digunakan untuk menetapkan semula satu arah - kiri atau kanan, masing-masing. tiada adalah lalai. mewarisi mungkin nilai ke-5, tetapi menghairankan tidak disokong internet Explorer... Menetapkan semula hanya aliran kiri atau kanan agak jarang berlaku, tetapi ia mempunyai faedah praktikal.

Keruntuhan besar

Satu perkara yang perlu dilakukan terapung membingungkan apakah kesan harta ini terhadap elemen induk. Jika elemen induk tidak mengandungi unsur selain apungan, maka ketinggiannya akan runtuh secara literal. Ini tidak selalu ketara, terutamanya jika ibu bapa tidak mempunyai latar belakang yang ketara, tetapi penting untuk mengingati perkara ini.

Tetapi alternatif kepada keruntuhan sedemikian adalah lebih teruk. Pertimbangkan senario berikut:

Jika kotak atas secara automatik mengembang untuk menampung elemen terapung, maka kita mendapat rehat dalam aliran teks antara perenggan, tanpa kemungkinan untuk menghapuskannya. Jika ini berlaku, maka pembangun akan lebih kerap mengadu tentang kelakuan bongkah terapung ini daripada tentang keruntuhan sekarang.

Runtuh harus sentiasa diingat untuk mengelakkan tingkah laku reka letak yang pelik dan masalah merentas pelayar. Kita boleh menyelesaikan masalah ini menggunakan jelas selepas unsur terapung dalam bekas, tetapi sebelum bekas ditutup.

Teknik pembatalan bungkus

Jika anda berada dalam situasi di mana anda tahu di mana elemen seterusnya, anda boleh menggunakan clear: kedua-duanya dan meneruskan perniagaan anda. Ini sesuai kerana ia tidak memerlukan sebarang penggodaman atau elemen tambahan. Tetapi malangnya, biasanya tidak semuanya berjalan seperti yang kita mahu, dan dalam kes ini, anda boleh menggunakan alat berikut.

Kaedah blok kosong.

Ia benar-benar blok kosong.

... Kadang-kadang anda boleh mencari elemen
atau mana-mana elemen rawak lain, tetapi div adalah yang paling biasa kerana ia tidak mempunyai gaya lalai dalam penyemak imbas, tidak mempunyai fungsi khas dan tidak mungkin dalam gaya CSS umum. Kaedah ini ditolak oleh ahli semantik kerana kehadirannya tidak mempunyai makna kontekstual pada halaman dan hanya ada untuk penampilan. Sudah tentu, dalam erti kata yang ketat, mereka betul, tetapi dia melakukan tugasnya dan tidak membahayakan sesiapa pun.

Kaedah limpahan.

Berdasarkan menentukan sifat CSS melimpah untuk elemen induk. Jika harta ini ditetapkan kepada auto atau tersembunyi untuk elemen induk, maka ia akan mengembang selepas elemen terapung, dengan berkesan mengosongkan terapung di sekelilingnya untuk elemen berikutnya. Kaedah ini boleh menjadi cantik dari segi semantik kerana ia tidak memerlukan elemen tambahan. Walau bagaimanapun, seperti yang anda lihat, kami telah menambah yang baharu div untuk menggunakan kaedah ini, yang bersamaan dengan menggunakan blok kosong bukan semantik dan kurang fleksibel. Ia juga harus diingat bahawa harta melimpah tidak bertujuan untuk melumpuhkan pembalut. Berhati-hati agar tidak menyembunyikan kandungan secara tidak sengaja atau menyebabkan bar skrol yang tidak diingini.

Kaedah pembersihan yang mudah.

Menggunakan CSS pseudo-selector (: after) untuk mengalih keluar pembalut. Daripada menggunakan harta itu melimpah untuk elemen induk, tetapkan kelas tambahan untuknya, contohnya "clearfix" dan gunakan gaya CSS berikut:

Pembetulan jelas: selepas (kandungan: "."; Keterlihatan: tersembunyi; paparan: blok; ketinggian: 0; jelas: kedua-duanya;)

Ia menggunakan sekeping kecil kandungan yang tersembunyi daripada pandangan, terletak selepas elemen induk, yang mengalih keluar pembalut. Kaedah ini tidak lengkap, kerana ia perlu mahal untuk menyokong pelayar lama.

Situasi yang berbeza memerlukan kaedah yang berbeza untuk menetapkan semula apungan. Mari kita ambil grid pelbagai jenis blok sebagai contoh.

Untuk penyepaduan visual yang lebih baik bagi blok serupa, kita mesti memulakan baris baharu apabila warna berubah. Kita boleh menggunakan kaedah limpahan atau terang terang jika setiap kumpulan warna mempunyai induk. Atau gunakan kaedah blok kosong antara kumpulan. Tiga blok induk yang tidak wujud sebelum ini, atau tiga blok kosong yang tidak wujud sebelum ini. Terpulang kepada anda untuk menentukan kaedah yang terbaik.

Masalah dengan unsur terapung

Unsur terapung sering dikritik kerana kerapuhannya. Kebanyakan kerapuhan ini berasal dari IE6 dannya pepijat berorientasikan terapung... Tetapi apabila semakin ramai pembangun menggugurkan sokongan untuk IE6, anda tidak perlu memikirkannya, tetapi bagi mereka yang mementingkan keserasian, berikut ialah senarai pendek.

Tolak ke bawah, ialah simptom bahawa elemen di dalam kotak terapung adalah lebih lebar daripada kotak ini (ini biasanya berlaku dengan imej). Kebanyakan penyemak imbas akan memaparkan bahagian yang menonjol bagi elemen terapung, tetapi ini tidak akan menjejaskan reka letak. IE akan mengembangkan kotak terapung dan selalunya memberi kesan drastik pada susun atur. Contoh biasa ialah imej yang menonjol dari blok kandungan utama, menolak bar sisi ke bawah.

Penyelesaian cepat untuk masalah: use overflow: hidden; untuk memotong lebihan.

Pepijat margin berganda adalah satu lagi perkara yang perlu diingat semasa bekerja dengan IE6. Pepijat ini dinyatakan dalam fakta bahawa jika medan berada di sebelah yang sama di mana ia berorientasikan terapung, medan digandakan. Sebagai contoh:

Kami akan mendapat margin kiri 40 px., bukannya 20 px.

Penyelesaian cepat untuk masalah: set paparan: sebaris untuk blok terapung, dan jangan risau elemen akan kekal tersekat.

3px Berlari... Intipati pepijat ini adalah bahawa teks yang terletak di sebelah elemen terapung secara aneh disesarkan oleh tiga piksel, seolah-olah di bawah pengaruh medan daya yang terletak di sekitar elemen terapung. Penyelesaian cepat untuk masalah: Tetapkan lebar dan ketinggian teks yang terjejas.

Dalam IE7 muncul Pepijat margin bawah apabila induk terapung dan induknya juga terapung. Margin-bawah kanak-kanak diabaikan oleh unsur moyang. Penyelesaian cepat untuk masalah: Gunakan padding-bottom pada ibu bapa dan bukannya margin-bottom kanak-kanak.