Artikel teknikal yang berkaitan dengan Float dalam pertukaran CSS_Experience

Konsep Float mungkin merupakan konsep yang paling mengelirukan dalam CSS. Float sering disalahfahamkan dan dikritik kerana isu kebolehbacaan dan kebolehgunaan yang disebabkan oleh mengapungkan semua elemen kontekstual. Walau bagaimanapun, punca masalah ini bukanlah teori itu sendiri, tetapi tafsiran teori oleh pembangun dan pelayar.

Jika anda membaca konsep terapung dengan teliti, anda akan mendapati bahawa ia tidaklah rumit seperti yang disangkakan. Kebanyakan masalah disebabkan oleh versi lama IE (saya hanya meneka). Jika anda mengetahui pepijat ini, anda boleh mengelakkan masalah ini.

Mari cuba atasi isu ini dan jelaskan beberapa salah faham sebelum ini tentang penggunaan terapung. Kami telah merujuk berpuluh-puluh artikel yang berkaitan dan memilih yang paling penting yang perlu anda ketahui.

Apa Yang Anda Patut Tahu Mengenai Terapung
---------------------------------- - ------------------------------------------------- - -----------------------

　 "Amalan imej dan teks di sekeliling boleh dikesan sejak dahulu lagi. Inilah sebabnya dari Netscape1. 1. Ciri ini mula-mula diperkenalkan ke dalam penyemak imbas, dan sebab CSS menggunakan atribut apungan untuk melaksanakannya Istilah 'Float' dirujuk daripada dokumen 'Additions to HTML 2.0' yang dikeluarkan dengan Netscape 1.1, menerangkan elemen yang terapung ke. sesuatu. "Kedudukan elemen terapung masih berdasarkan aliran dokumen biasa, dan kemudian ia diekstrak daripada aliran dokumen dan digerakkan sejauh mungkin ke sebelah kiri atau kanan. Sekitar elemen terapung. Apabila elemen diekstrak daripada aliran dokumen biasa, elemen lain yang masih dalam aliran dokumen akan mengabaikan elemen dan mengisi ruang asalnya "

" Elemen akan diputar secara automatik selepas diapungkan elemen boleh dialihkan ke kiri atau kanan baris semasa Atribut adalah seperti berikut: apung: kiri, apung: kanan atau apung: tiada"

"Anda harus menetapkan ini untuk semua elemen terapung atribut (melainkan ia elemen , yang mempunyai lebar tersirat). Jika lebar tidak ditetapkan, hasilnya akan menjadi tidak dapat diramalkan. sifat, sama ada dinyatakan secara eksplisit atau tersirat Selain itu, ia mengisi elemen bekas secara mendatar yang mungkin, seolah-olah ia adalah kandungan tidak terapung, tidak meninggalkan ruang untuk kandungan lain untuk mengelilinginya, dan dalam aliran dokumen biasa, jidar menegak elemen terapung tidak akan bertindih Akhir sekali, elemen terapung boleh bertindih dengan elemen peringkat blok bersebelahan dalam aliran dokumen biasa (Anotasi: Elemen terapung tidak menduduki mana-mana ruang aliran dokumen biasa, jadi adalah disyorkan untuk tidak difahami sedemikian. Bertindih. , tetapi konsep terapung.) "

"Perkara pertama yang perlu kita ingat ialah unsur terapung hanya boleh terapung ke kiri atau kanan, tidak ada yang terapung ke tengah Banyak pemula membuat kesilapan. Ingat, peraturan yang paling asas ialah elemen terapung hanya boleh terapung ke kedua-dua belah pihak tepi bekas. Jika kita mengapungkan elemen lain dalam arah yang sama, ia akan terapung sehingga ia mencecah tepi elemen terapung sebelum ini. Jika kita mengapungkan lebih banyak elemen, ia akan disusun satu demi satu, tetapi tidak lama lagi tidak akan ada ruang . Baris tidak boleh memuatkan unsur terapung lagi dan elemen terapung seterusnya akan dibalut ke baris lain dan terus disusun. "

Mengandungi blok atau mengandungi kotak: "Elemen bekas merujuk kepada elemen peringkat baris atau peringkat blok yang mengandungi elemen anak lain. . . . ” 　　

　　　“Apabila dinyatakan secara eksplisit, kedudukan menegak unsur terapung ditentukan oleh kedudukan asalnya dalam aliran dokumen, dengan bahagian atas sejajar dengan bahagian atas baris semasa. Tetapi secara mendatar, ia bergerak sejauh mungkin ke arah tepi elemen bekas, tetapi masih mengikut pelapik elemen bekas. Elemen sebaris baris yang sama disusun di sekeliling elemen terapung. "

"Memandangkan elemen terapung tidak menduduki ruang aliran dokumen biasa, elemen peringkat blok yang kedudukannya tidak dinyatakan secara eksplisit sebelum dan selepas elemen terapung akan menduduki kedudukan di mana elemen terapung sepatutnya berada, seolah-olah ia mempunyai tidak pernah wujud. Garisan selepas elemen terapung akan mengecut lebar berdasarkan elemen terapung. Elemen sebelum elemen terapung akan disusun semula dan menduduki baris yang berasingan. (Anotasi: ie dan ff berkelakuan berbeza dalam kes ini)"

"Jika tiada ruang yang mencukupi dalam arah mendatar baris semasa untuk menampung elemen terapung, pindah ke baris seterusnya sehingga terdapat ruang yang boleh menampung unsur terapung. "

"Tiada unsur terapung boleh melebihi sempadan atas lokasi dokumen asal. Bahagian atas elemen terapung mesti diselaraskan dengan bahagian atas baris semasa (atau tepi bawah elemen peringkat blok sebelumnya jika tiada elemen baris semasa). ”

　“Untuk benar-benar memahami teori apungan, anda mesti memahami maksud kotak garisan dalam CSS. Malangnya, untuk menerangkan apa itu baris, anda mesti terlebih dahulu memahami apa itu elemen peringkat baris.Elemen peringkat baris merujuk kepada elemen bukan peringkat blok tersebut, seperti Baris ialah konsep logik yang mengandungi semua elemen peringkat baris yang membentuk ketinggiannya sekurang-kurangnya sama kepada elemen peringkat baris ini yang paling tinggi. ”

　“Jika kita menambah apungan: kiri pada semua lajur dalam Div, ia akan disusun satu demi satu ke kiri Jika kita mahu mempunyai pengaki di bahagian bawah halaman, kita tidak. t memerlukan lajur terpanjang, selagi Hanya tambah jelas: kedua-duanya"

"Menggunakan elemen terapung untuk mengandungi unsur terapung mempunyai potensi kelemahan, iaitu, sama ada halaman anda sentiasa boleh mengekalkan persembahan yang konsisten bergantung pada pelayar. Sama ada pelaksanaan kekal konsisten. Terutamanya jika elemen terapung adalah sebahagian daripada susun atur yang lebih kompleks, ia akan menjadi lebih terdedah. ”

Membersihkan pelampung
------------------------------------- --------------------------------------------------- --- ---------------------

　"Unsur selepas unsur terapung akan mengelilingi unsur terapung secara automatik. Jika anda tidak mahu ini, anda boleh menggunakan atribut 'clear' pada elemen ini. Atribut ini mempunyai 4 tetapan: clear: left, clear: right, clear: both or clear: none”

Terdapat banyak teknik untuk membersihkan elemen terapung tanpa memperkenalkan teg unsemantik tambahan Di bawah 3 adalah kaedah yang lebih biasa: a ) Apungkan elemen bekas bersama b) Gunakan limpahan: tersembunyi pada elemen bekas c) Gunakan kelas pseudo CSS seperti: selepas

"Memasukkan elemen pembersihan adalah untuk membuat bekas. Amalan standard untuk membalut semua elemen terapung dengan betul, berbuat demikian mempunyai kesan 'menyeret' tepi bawah bekas untuk membalut elemen yang terkandung. ”

　“Untuk reka letak berdasarkan reka bentuk terapung, masalah biasa ialah bekas unsur terapung tidak secara automatik mengembang untuk mengandungi unsur terapung. Jika anda ingin menambah sempadan di sekeliling semua elemen terapung (contohnya, sempadan di sekeliling elemen bekas), anda mesti mengarahkan penyemak imbas secara eksplisit untuk meregangkan bekas. Anda boleh menggunakan kaedah limpahan. ”

Menggunakan:selepas Bayangkan kita menggunakan :selepas untuk memasukkan noktah dan menetapkan sifatnya {clear: both;}. Itu sahaja yang perlu anda lakukan, tetapi tiada siapa yang akan menerima bahagian bawah bekas sedikit jurang, jadi kita juga perlu menetapkan {height: 0;} dan {visibility: hidden;} untuk memastikan kesesuaian yang sempurna.