Gunakan atribut clear css untuk mendapatkan efek pembungkusan teks iklan

Pernahkah Anda melihat bahwa iklan website besar ditempatkan di tengah konten untuk membungkus teks? Umumnya iklan website kecil biasa hanya dapat ditempatkan di awal atau akhir konten. Mungkin sistem cms dari website besar memilikinya fungsi ini. Dasar-dasar cms yang biasa digunakan oleh situs web kecil kami Tidak ada fungsi seperti itu, karena tidak mungkin menambahkan tag iklan secara otomatis ke tag konten, kecuali Anda mengeditnya secara manual saat menambahkan artikel, yang tidak melelahkan.

Saya tidak pernah berpikir untuk menggunakan css untuk mengontrolnya, terutama karena saya tidak mengharapkan atribut clear. Saya tidak sengaja melihat pengantar hari ini dan menyadari bahwa menerapkan pembungkusan teks sangat sederhana.

Contoh kode:

<div kelas="berita">
<div style="float:left;height:300px;width:0">Lapisan kosong dengan lebar 0, menggunakan tinggi lapisan ini untuk mengontrol posisi atas dan bawah lapisan iklan</div>
<div style="float:left;height:250px;width:250px;clear:left;">Kode periklanan</div>
</div>

Kuncinya terletak pada peran clear:left. Clear memiliki tiga atribut: clear:both, clear:left, dan clear:right, yang masing-masing menunjukkan pembersihan blok mengambang di kedua sisi, kiri, dan kanan. Menambahkan clear:left pada layer iklan berarti layer tersebut tidak lagi mengapung relatif terhadap layer kosong dan akan bergerak ke bawah, haha.

Mari kita bandingkan:

<div kelas="berita">
<div style="float:left;height:300px;width:100px;background:#CCC;">Tambahkan lebar dan latar belakang untuk memudahkan pengamatan efek</div>
<div style="float:left;height:250px;width:250px;">Jika Anda menghilangkan pelampung bening, Anda akan memahami maknanya</div>
</div>

Jika Anda menambahkan yang ini:

<style>.news img,.news table{clear:both;}</style> //Biarkan gambar dan tabel di konten tidak menutupi iklan

Sayangnya, pengujian di atas menemukan bahwa hanya IE yang layak. Firefox dan Opera memiliki hasil yang berbeda. Efek IE adalah gambar secara otomatis berpindah ke bawah ketika menemukan lapisan iklan karena lapisan iklannya ada di bagian depan, di opera gambarnya tidak akan bergerak ke bawah dan akan menutupi lapisan iklannya.

Ditingkatkan lagi:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //Biarkan gambar dan tabel otomatis berada di bawah

Akhirnya selesai juga, lumayan sempurna, dan efek seputar konten iklan pun kini sudah lengkap :)

//29-02-2008, dimodifikasi oleh: Apa itu

Lupa menambahkan

Ada yang bertanya apakah teksnya harus dibungkus di kanan atas dan bawah, jadi saya mengubahnya sebagai berikut: