Hapus pembungkus css. CSS: Elemen pembungkus. Susunan lapisan secara horizontal
Buat blok yang terdiri dari gambar dan teks, dan teks tidak boleh membungkus gambar.
Kiri benar, kanan tidak.
Kondisi tambahan: lebar teks maupun gambar tidak ditentukan secara ketat. Jika tidak ada gambar, teks akan mengambil lebar penuh.
Larutan
Mencoba menulis gaya. Dengan kolom kiri, semuanya jelas:
Photo ( float: left; /* atur float */ margin:10px; /* padding untuk kecantikan */ display:inline; /* untuk IE6 agar padding sebelah kiri tidak double */ )
Sekarang gambar di sebelah kiri dan teks di sebelah kanan. Tetapi jika ada lebih banyak teks, itu akan "menyelam" di bawah gambar (lihat gambar di atas), dan kami tidak membutuhkan ini.
Hal pertama yang terlintas dalam pikiran adalah "mengapung" teks juga. Tetapi dalam hal ini, jika Anda tidak menentukan lebarnya, teks akan berada di bawah gambar!
float:left/right akan membutuhkan lebar - jika tidak maka tidak akan berhasil!
Berpikir lebih jauh... Solusi yang bagus mungkin .description( : XXXpx). Memang, dalam beberapa situasi opsi ini lolos. Misalnya, jika ukuran gambar masih diatur. Katakanlah itu adalah blok berita karet. Gambar tidak boleh lebih lebar, katakanlah 200px, dan teks sudah direntangkan dan memenuhi seluruh lebar yang tersisa.
Namun, opsi ini memiliki kelemahan yang signifikan. Jika tidak ada blok dengan gambar, indentasi akan tetap menjadi lubang yang konyol. Tentu saja, Anda dapat menghapusnya menggunakan pemilih saudara, seperti yang dijelaskan dalam artikel, tetapi dalam kasus kami ada solusi lain.
Anda dapat menonaktifkan pembungkusan hanya dengan menambahkan :hidden; untuk kolom teks. Ini akan menetapkan konteks pemformatan baru untuknya (topik ini akan segera dibahas lebih detail).
Satu-satunya browser yang bereaksi salah terhadap hal ini, tentu saja, adalah IE6. Khusus untuk itu kita atur kolomnya misalnya “floatim” (tidak perlu atur lebarnya).
Jadi solusi untuk masalah terlihat seperti ini:
Photo ( float: left; /* atur float */ margin:10px; /* padding untuk kecantikan */ display:inline; /* untuk IE6, agar padding sebelah kiri tidak berlipat ganda */ ) .description( overflow :tersembunyi; ) * html .deskripsi( float:kiri; )
Seperti biasa, dalam kondisi pertempuran kami menggunakan .
Dalam desain web modern, properti mengambang digunakan di hampir setiap langkah. Namun terlepas dari prevalensi seperti itu, tidak semua orang memahami mekanisme blok apung, perilakunya, dan apa konsekuensi dari penggunaannya.
Apa itu "melayang"?
mengambang itu adalah properti pemosisian CSS. Untuk memahami esensi dan asalnya, Anda perlu memperhatikan desain cetak. Dalam tata letak tercetak, gambar dapat diposisikan sedemikian rupa sehingga teks membungkusnya. Ini biasanya disebut " pembungkus teks".
Dalam tata letak halaman, blok yang berisi teks dapat ditentukan untuk digunakan membungkus teks di sekitar gambar atau abaikan pembungkus. Mengabaikan pembungkusan teks akan memungkinkan kata-kata mengalir di atas gambar seolah-olah tidak ada. Inilah perbedaan apakah gambar merupakan bagian dari aliran pada halaman atau tidak. Dalam desain web, semuanya sangat mirip.
Dalam desain web, elemen dengan properti CSS diterapkan padanya mengambang akan berperilaku seperti gambar dengan teks yang membungkusnya dalam tata letak cetak. Elemen mengambang tetap menjadi bagian dari alur halaman web. Ini sama sekali tidak seperti elemen posisi absolut, yang dihapus dari alur, seolah-olah dalam tata letak cetak, kotak teks diminta untuk mengabaikan pembungkusan gambar. Elemen yang benar-benar diposisikan tidak memengaruhi penempatan elemen lain, dan elemen lain tidak memengaruhi penempatannya.
Menetapkan properti mengambang untuk elemen dengan CSS terlihat seperti ini:
#sidebar ( float: kanan; )
Ada empat nilai valid untuk sebuah properti mengambang - kiri, Kanan, tidak ada, mewarisi. Dua pertama kiri Dan Kanan menunjukkan arah lokasi - masing-masing kiri dan kanan. Tidak ada- nilai default, menunjukkan bahwa elemen tersebut tidak mengambang dan mewarisi menginstruksikan elemen untuk mewarisi nilai properti mengambang dari elemen induk.
Untuk apa pelampung digunakan?
Selain contoh sederhana membungkus teks di sekitar gambar, mengambang dapat digunakan untuk membuat tata letak web.
mengambang, juga berguna untuk elemen tata letak kecil. Misalnya, ambil potongan kecil halaman web ini. Jika kita mengatur properti mengambang untuk gambar avatar kecil, saat gambar diubah ukurannya, pembungkusan akan berubah sesuai dengan dimensi gambar yang baru:
Tata letak yang sama dapat diimplementasikan menggunakan pemosisian wadah relatif dan pemosisian mutlak avatar dan teks di dalamnya. Namun dalam tata letak yang diterapkan dengan cara ini, mengubah ukuran gambar tidak akan memengaruhi blok teks, karena elemen dengan pemosisian absolut tidak memengaruhi elemen lain dan elemen lain tidak memengaruhinya.
Bungkus Ulang
Jernih properti terkait dengan properti mengambang. Elemen dengan properti set jernih tidak akan bergerak di sekitar elemen dengan set properti mengambang, tetapi akan bergerak ke bawah, mengabaikan aliran. Dan lagi, ilustrasi yang akan menjelaskan semuanya tanpa basa-basi.
Pada contoh di atas, sidebar melayang di sebelah kanan blok konten utama. "Footer" telah pindah ke ruang kosong di bawah sidebar, mengalir di sekitar blok dengan konten utama. Solusi untuk masalah ini adalah menyetel nilai properti clear:both menjadi "footer" untuk "menghapus" bungkus di sekitar kedua kolom.
#footer ( hapus: keduanya; ) 
Properti jernih memiliki empat arti. Keduanya digunakan untuk mengatur ulang aliran di kedua arah. Kiri Dan Benar digunakan untuk mengatur ulang satu arah - masing-masing kiri atau kanan. Tidak ada- nilai standar. Mewarisi bisa menjadi nilai kelima, tetapi ternyata tidak didukung Internet Explorer. Menyetel ulang hanya bungkus kiri atau kanan cukup jarang, tetapi memiliki manfaat praktis.
keruntuhan besar
Satu hal untuk dikerjakan mengambang membingungkan adalah efek properti ini terhadap elemen induk. Jika elemen induk tidak berisi elemen selain elemen float, maka tingginya akan runtuh. Ini tidak selalu terlihat, terutama jika elemen induk tidak memiliki latar belakang yang menonjol, tetapi penting untuk mengingatnya.
Tetapi alternatif dari keruntuhan semacam itu bahkan lebih buruk lagi. Pertimbangkan skenario berikut:
Jika blok atas secara otomatis mengembang untuk mengakomodasi elemen mengambang, maka kita akan mendapatkan jeda aliran teks antar paragraf, tanpa ada cara untuk memperbaikinya. Jika ini masalahnya, maka pengembang akan lebih banyak mengeluh tentang perilaku blok mengambang ini daripada yang mereka lakukan sekarang tentang keruntuhan.
Ciutkan harus selalu diingat untuk mencegah perilaku tata letak yang aneh dan masalah lintas-browser. Kita dapat memecahkan masalah ini menggunakan jernih setelah elemen mengambang di wadah, tetapi sebelum wadah ditutup.
Bungkus Undo Teknik
Jika Anda berada dalam situasi di mana Anda tahu di mana elemen berikutnya akan berada, Anda dapat menggunakan clear:both dan lanjutkan bisnis Anda. Ini adalah opsi yang sempurna karena tidak memerlukan peretasan atau tambahan apa pun. Namun sayangnya, biasanya tidak semuanya berjalan seperti yang kita inginkan, dan dalam hal ini, Anda dapat menggunakan alat berikut.
Metode blok kosong.
Ini benar-benar sebuah blok kosong.
. Terkadang Anda dapat menemukan elemen
atau elemen acak lainnya, tetapi div adalah yang paling umum karena tidak memiliki gaya default browser, tidak ada fungsi khusus, dan sepertinya tidak memiliki gaya CSS yang umum. Metode ini ditolak oleh ahli semantik karena kehadirannya tidak memiliki makna kontekstual pada halaman dan hanya ada untuk penampilan. Tentu saja, dalam arti sempit mereka benar, tetapi dia melakukan tugasnya dan tidak merugikan siapa pun.
metode luapan.
Berdasarkan spesifikasi properti CSS meluap untuk elemen induk. Jika properti ini diatur ke mobil atau tersembunyi untuk elemen induk, itu akan diperluas setelah elemen mengambang, secara efektif mengatur ulang aliran untuk elemen berikutnya. Metode ini bisa semantik indah karena tidak memerlukan elemen tambahan. Namun, seperti yang Anda lihat, kami telah menambahkan yang baru div untuk menggunakan metode ini, yang setara dengan menggunakan blok kosong non-semantik dan kurang fleksibel. Juga harus diingat bahwa properti meluap Ini tidak dimaksudkan untuk mematikan arus. Berhati-hatilah agar tidak sengaja menyembunyikan konten atau menyebabkan scrollbar yang tidak diinginkan.
Metode pembersihan ringan.
Menggunakan CSS pseudo-selector (:after ) untuk menghapus pembungkus. Alih-alih menggunakan properti meluap untuk elemen induk, setel kelas tambahan untuknya, seperti "clearfix" dan gunakan gaya CSS berikut:
Clearfix: setelah ( konten: "."; visibility: hidden; display: block; height: 0; clear: both; )
Ini menggunakan sebagian kecil konten yang tersembunyi dari tampilan, terletak setelah elemen induk, yang menyetel ulang pembungkusan. Metode ini belum selesai, karena perlu ditingkatkan untuk mendukung browser lama.
Situasi yang berbeda membutuhkan metode yang berbeda untuk menyelesaikannya. Mari kita ambil kisi dari berbagai jenis blok sebagai contoh.
Untuk penyatuan visual yang lebih baik dari blok serupa, kita harus memulai baris baru saat warnanya berubah. Kita dapat menggunakan metode overflow atau light clear jika setiap grup warna memiliki elemen induk. Atau gunakan metode blok kosong antar grup. Tiga kotak induk yang sebelumnya tidak ada, atau tiga kotak kosong yang sebelumnya tidak ada. Terserah Anda untuk memutuskan metode mana yang terbaik.
Masalah dengan elemen mengambang
Elemen mengambang sering dimarahi karena kerapuhannya. Sebagian besar kerapuhan ini berasal dari IE6 dan bug berorientasi float. Tetapi karena semakin banyak pengembang menjatuhkan dukungan untuk IE6, Anda mungkin tidak memikirkannya, tetapi bagi mereka yang peduli dengan kompatibilitas, inilah daftar singkatnya.
Menekan, adalah gejala bahwa elemen di dalam kotak apung lebih lebar daripada kotak apung (biasanya ini terjadi pada gambar). Sebagian besar browser akan merender bagian yang menonjol dari elemen mengambang, tetapi ini tidak akan memengaruhi tata letak. IE akan memperluas kotak apung dan seringkali hal ini akan berdampak drastis pada tata letak. Contoh tipikal adalah gambar yang mencuat dari blok konten utama, mendorong sidebar ke bawah.
Pemecahan masalah cepat: gunakan luapan: tersembunyi; untuk memotong kelebihan.
Bug margin ganda adalah hal lain yang perlu diingat ketika bekerja dengan IE6. Bug ini diekspresikan dalam fakta bahwa jika bidang berada di sisi yang sama dengan orientasinya mengambang, bidangnya digandakan. Misalnya:
Kami akan memasukkan margin kiri 40px., alih-alih 20px.
Pemecahan masalah cepat: atur tampilan: sebaris untuk blok mengambang, dan jangan khawatir elemen akan tetap berada di level blok.
3px joging. Inti dari bug ini adalah teks yang terletak di sebelah elemen mengambang secara aneh digeser tiga piksel, seolah-olah di bawah pengaruh medan gaya yang terletak di sekitar elemen mengambang. Pemecahan masalah cepat: menyetel lebar dan tinggi teks yang terpengaruh.
Muncul di IE7 Bug margin bawah ketika elemen induk adalah elemen mengambang dan anaknya di dalamnya juga merupakan elemen mengambang. Margin bawah (margin-bottom ) anak diabaikan oleh elemen induk. Pemecahan masalah cepat: Gunakan margin bawah ( padding-bottom ) pada elemen induk, bukan padding bawah ( margin-bottom ) pada elemen anak.
Misalnya, mari tambahkan kode HTML ke halaman, yang akan menyertakan tiga blok pembungkus dan tiga blok bernomor di dalamnya:
Sekarang kita akan menentukan gaya umum untuk mereka:
Container1, .container2, .container3( width: 70%; margin: 15px auto 0; background-color: #CCFFCC; border: 2px solid #ccc; padding:20px; ) .block1, .block2, .block3( padding-top : 35px; perataan teks: tengah; ukuran font: 28px; bayangan teks: 1px 1px 1px rgba(0, 0, 0, 0,5); warna latar belakang: #CCCCFF; tinggi: 65px; lebar: 100px; )
Alhasil, inilah gambarannya:
Mari ubah properti float ke blok bernomor:
Blok1, .block2, .block3( float: kiri; ) 
Cara pertama adalah menggunakan properti clear dengan nilai keduanya pada elemen blok yang mendasarinya.
Ini adalah opsi umum, dan saya sering menggunakannya, meskipun menurut saya itu bukan yang terbaik. Setuju, saat memikirkan markup untuk halaman HTML, Anda tidak ingin menggunakan elemen tambahan yang tidak sesuai dengan logika.
Metode kedua tidak memerlukan penambahan kode HTML yang tidak perlu. Untuk menggunakannya, Anda hanya perlu menulis satu baris ke wadah - luapan dengan nilai otomatis. Hanya ada satu kelemahan setelah menggunakan metode ini: konten yang terletak di dalam tidak dapat dipindahkan ke luar blok pembungkus, yang akan sangat merepotkan saat Anda perlu memposisikan sesuatu yang relatif terhadap wadah di luar lorongnya.
Container2( luapan: otomatis;) 
Cara ketiga menurut saya paling optimal. Ini memiliki keuntungan dari metode pertama dan kedua: tidak adanya elemen yang tidak perlu dan penggunaan properti clear. Untuk mengimplementasikannya, Anda perlu menggunakan after pseudo element. Dengannya, Anda dapat mensimulasikan elemen div. Untuk melihatnya, tentukan latar belakang dan ubah ketinggian dari 0 menjadi 2px.
Container3:setelah( konten: ""; tampilan: blok; hapus: keduanya; tinggi: 2px; warna latar: #000; )
Ini adalah bagaimana Anda dapat menonaktifkan pembungkusan di CSS. Mungkin ada cara lain untuk mengatasi masalah ini, menarik untuk diketahui. Tulis di kolom komentar pilihan Anda.
Cukup sering, tugas non-standar tertentu ditetapkan sebelum perancang tata letak. Tujuan kami adalah menawarkan solusi yang paling rasional dan tepat. Hari ini kita akan berbicara tentang fitur membungkus teks di sekitar gambar.
Perumusan masalah
Menulis artikel untuk sumber informasi atau blog Anda akan sering diselingi dengan gambar-gambar di sepanjang jalan. Karena robot pencari selalu menghormati keberadaan gambar di situs, pengguna akan lebih senang dengan teks dengan gambar yang cerah. Karenanya perlu menginstal metode pemformatan khusus yang akan memberikan interaksi yang indah antara teks dan gambar.
Pertimbangkan kasus ketika pembungkusan teks tidak diperlukan. Selain itu, saya menawarkan opsi universal - dengan tidak adanya gambar, teks direntangkan ke seluruh lebar blok (namun tidak semua artikel Anda akan disertai dengan ilustrasi). Lebar blok dengan teks tidak diperbaiki secara ketat. Di bawah ini adalah tampilan blok kita.
Solusi yang tepat
Untuk mengimplementasikan tugas, kami membuat dua blok: satu untuk gambar, yang kedua untuk teks. Mempertimbangkan fakta bahwa beberapa elemen lain dapat ditempatkan di bawah gambar, kami membuat wadah terpisah untuk gambar tersebut, jika tidak, ini tidak diperlukan, Anda cukup menetapkan kelas yang diperlukan ke tag gambar.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Blok teks
Tampilan: sebaris; )
Ini adalah solusi standar untuk teks yang akan membungkus blok dengan gambar. Ini akan terlihat seperti ini:
Akan sangat logis untuk menyarankan untuk menugaskan properti objek mengambang ke teks juga. Dengan lebar objek yang tidak diatur, kita mendapatkan gambar berikut
Untuk menghindari efek ini, kita hanya perlu menentukan lebar blok teks, tetapi ini tidak memenuhi persyaratan tugas kita.
Pilihan bagus berikutnya adalah menggunakan properti margin-left. Karena untuk sebuah blog, kemungkinan besar semua gambar di blok ini akan disatukan ukurannya, solusinya pada prinsipnya lumayan dan efektif. Namun, ini hanya kasus khusus, karena jika artikel tidak memiliki gambar, hanya akan ada halaman kosong di sebelah kiri. Ini tidak cocok untuk kita. Kami mencari solusi universal!
Dan solusi paling tepat, seperti yang sering terjadi, adalah yang paling sederhana. Untuk mencapai pemformatan blok teks yang diinginkan, Anda perlu mengakses properti luapan dengan nilainya tersembunyi. Jangan lupa tentang Internet Explorer yang unik. Dia berpakaian seperti biasa dan membutuhkan perhatian tambahan! Agar orang tua kami bekerja secara normal, kami menambahkan properti float ke blok teks (setelah mengakses properti overflow, definisi lebar tetap tidak diperlukan).
Jadi, kami sampai pada solusi yang tepat, yang akan menghasilkan efek yang ditunjukkan pada gambar di subbagian, yang menjelaskan kondisi masalah kami.
Gambar ( float: kiri; /* bungkus */ margin: 10px; /* margin untuk kecantikan */ tampilan: sebaris; /* untuk IE6, jangan double padding kiri */) . teks( overflow: tersembunyi; float: kiri;)
Kerugian dari metode dan alternatif
Terlepas dari kesederhanaan dan keserbagunaan metode, yang terdiri dari penerapan meluap: tersembunyi, ada satu kelemahan. Properti akan berhenti menjalankan fungsinya jika elemen drop-down digunakan di bagian teks.
Dalam hal ini, Anda memerlukan alternatif untuk menyiapkan pemformatan yang diinginkan. Teknik ini akan didasarkan pada kombinasi fungsional tampilan: sel-tabel;. Solusi ini sama efektifnya, tetapi kesederhanaannya sedikit lebih rendah dari metode pertama. Saat memanggil metode ini, Anda juga perlu menyetel tata letak agar berfungsi di lingkungan Internet Explorer
img(float:kiri; /* atur pembungkus */ margin: 10px /* inden untuk kecantikan */ tampilan: sebaris; /* untuk IE6, jangan double padding kiri */) . teks( tampilan: sel-tabel; zoom: 1 ; /* Dengan hati-hati! String tidak valid */ }
Dan solusi ini memiliki ciri khas tersendiri yang perlu diperhatikan saat tata letak. Jika bagian teks cukup pendek, maka blok berikutnya akan ditampilkan di sebelah kanan blok dengan kelas teks. Untuk menghindarinya, Anda perlu melampirkan blok teks dan gambar dalam wadah terpisah.
Browser apa yang berfungsi?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Saat digunakan dengan benar, float menjadi alat tata letak yang kuat yang digunakan untuk menyelaraskan dan mengatur elemen. Namun, untuk menjaga agar alat ini tetap terkendali, diperlukan penyeimbang, yang tanpanya potensi besar pelampung direduksi menjadi beberapa tugas sempit. Kami berbicara tentang membatalkan pembungkus menggunakan metode yang berbeda. Kami daftar beberapa yang paling populer.
Lebar Elemen
Jika elemen mengambang mengambil seluruh lebar yang tersedia, maka elemen yang tersisa setelahnya akan dimulai pada baris baru. Untuk melakukan ini, lebar total elemen harus sama dengan 100%. Contoh 1 menunjukkan pembuatan panah pada satu baris.
Contoh 1: Menggunakan lebar
Setiap kotak panah sekarang mengambil 50% dari lebar, dan menambahkan hingga 100% dari lebar, sehingga paragraf setelah panah dimulai pada baris baru.
Metode ini jarang digunakan, karena tidak selalu memungkinkan untuk menentukan lebar elemen secara eksplisit, terlebih lagi, metode ini tidak menyelesaikan masalah dengan tinggi blok dan latar belakangnya (Gbr. 1).
Beras. 1. Tidak ada isian latar belakang
Menggunakan luapan
Bening pelampung 2
Buat halaman web seperti yang ditunjukkan pada gambar. 1. Gunakan simbol ₽ untuk menyatakan rubel.
Tunjukkan jawaban
