Adakah CSS terapung ditutup?

Soalan yang menarik telah muncul dalam kerja baru -baru ini: Sekiranya kita juga menggunakan atribut CSS Float selepas mempunyai grid CSS dan Flexbox?

Jawapan ringkas

Tidak! Atau, dalam kebanyakan kes, ia tidak digunakan. Pada masa kini, saya hanya akan menggunakannya untuk gambar-gambar yang menyeberang teks dan akan mengelakkan menggunakannya sepenuhnya untuk susun atur.

Jawapan yang lebih panjang dan lebih menjengkelkan

Sebelum Flexbox dan Grid muncul, kita perlu menggunakan harta terapung CSS untuk membuat grid dan susun atur. Malah, ini adalah atribut pertama yang saya hubungi ketika belajar reka bentuk web. Pada petang musim panas yang panas, saya membuka sebuah buku yang dipanggil "Designing With Web Standards" oleh Jeffrey Zeldman dan memindahkan div merah kecil dengan float: right . Ini hanya sihir! Terdapat kuasa besar di apungan.

Unsur -unsur yang bergerak di skrin sangat mudah sehingga saya tertanya -tanya berapa banyak pereka yang jatuh cinta dengan reka bentuk web hanya kerana kesederhanaan elemen mudah alih ini.

Walau bagaimanapun, membina susun atur kompleks dengan apungan selalu menjadi penyelesaian stopgap: ia sebenarnya direka untuk menyimpan teks di sekeliling gambar.

 <code>img { width: 150px; float: left; }</code>

Masalah terapung bermula apabila kita cuba membina susun atur besar dan grid gaya majalah. Tetapi kemudian kami tidak mempunyai pilihan selain berbuat demikian.

Satu masalah dengan atribut terapung ialah anda perlu membungkus elemen terapung dengan sesuatu yang dipanggil ClearFix, yang kelihatan seperti ini:

<code><div>
  <div>Lajur</div>
  <div>Lajur</div>
  <div>Lajur</div>
</div></code>

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

Jay Hoffman telah menggambarkan Hack ClearFix sebelum ini:

Clearfix, bagi mereka yang tidak tahu, ini adalah hack CSS, yang menyelesaikan bug berterusan yang berlaku apabila dua elemen terapung disusun bersebelahan. Apabila elemen diselaraskan dengan cara ini, ketinggian bekas induk berakhir menjadi 0, yang dapat dengan mudah memecahkan susun atur. Anda mungkin hanya mahu meletakkan bar sisi di sebelah kiri blok kandungan utama, tetapi hasilnya adalah bahawa kedua -dua elemen bertindih dan runtuh satu sama lain. Lebih rumit ialah bug ini tidak konsisten dalam pelayar yang berbeza. ClearFix dicipta untuk menyelesaikan semua masalah ini.

Selepas itu, keadaan mula berubah perlahan. Kembali pada tahun 2017, Rachel Andrew menjelaskan bagaimana pelayar boleh mengendalikan masalah ClearFix tanpa sebarang hack sama sekali. Kami hanya memerlukan CSS berikut untuk mencapai pembetulan yang sama:

 <code>.container { display: flow-root; }</code>

Anehnya, saya tidak tahu kewujudan nilai flow-root sehingga tiga minit sebelum saya menaip. Tetapi ini boleh membuktikan apa yang akan saya katakan seterusnya: dengan grid CSS dan Flexbox, kita sebenarnya tidak memerlukan terapung sama sekali. Harta ini pada asalnya direka dengan hanya satu tujuan: untuk membolehkan teks mengelilingi gambar. Tetapi sekarang, dengan Grid dan Flexbox, kami mempunyai ciri -ciri yang kuat yang boleh melakukan susun atur sebenar.

Kembali ke perbincangan yang saya ada di tempat kerja. Sesetengah orang mengatakan bahawa kita harus kembali ke codebase dan memadam semua contoh terapung kerana ia adalah kod yang sangat lama dan kita boleh menggantikannya dengan flexbox atau grid dengan mudah. Tetapi di sini, saya ingin berkata, "Tunggu!" Saya tidak fikir mengekalkan atribut terapung di beberapa tempat di pangkalan kod melakukan banyak kerosakan - bukan kod radioaktif yang akan menyebabkan masalah.

Oleh itu, adakah kita menggunakan CSS terapung untuk tujuan lain selain mempunyai bungkus teks di sekitar imej? Tidak. Tetapi haruskah kita membersihkan semua pengisytiharan terapung CSS di rangkaian dengan segera, kerana ia tidak murni dan bukan pendekatan "betul"? Tidak juga.

Keindahan rangkaian adalah bahawa kod lama tidak boleh memecahkan perkara. Hanya tanya Chris. Sebuah laman web yang tidak menggunakan atribut CSS yang paling mempesonakan atau helah yang paling keren tidak berguna atau buruk. Kami hanya menggantikan terapung dengan alternatif yang lebih baik. Saya fikir ini adalah pelajaran yang baik bahawa sifat -sifat CSS ini mungkin berada di sana selama -lamanya kerana mereka masih mempunyai kes penggunaan yang berkenaan dalam reka bentuk web moden.

Ini sangat bagus.

Atas ialah kandungan terperinci Adakah CSS terapung ditutup?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!