Analisis singkat tentang penggunaan float html ditangguhkan

Penulis：Eve Cole Waktu Pembaruan：2025-04-25 21:16:01

Beberapa penggunaan float

Suspensi kiri: float:left;

Suspensi Kanan: float:right;

Penggunaan float

Penggunaan float cukup lebar. Di sini saya secara singkat memperkenalkan penggunaan umum dalam koleksi:

Sebelum saya masuk ke float, saya akan mengatur beberapa properti blok inline. Atribut blok dikombinasikan dengan inlay Div untuk melengkapi tata letak halaman. Kemudian saya masuk ke atribut mengambang, yang membuat elemen melayang lebih mudah. Tidak ada perbedaan antara elemen tingkat blok, elemen inline, atau blok inline di mengambang. Float juga akan mengetik secara otomatis karena ukuran elemen induk berubah, misalnya. Sesuaikan langsung jendela tampilan dan peras elemen ke baris berikutnya.
Selain itu, sejauh optimasi SEO yang baru saja saya pelajari, analisis browser berasal dari atas ke bawah. Oleh karena itu, konten penting sering ditulis di depan dan beberapa tidak penting atau iklan ditulis di belakang. Namun, saya ingin pengguna memperhatikan iklan. Oleh karena itu, konten utama diatur di tengah, dan iklan ditangguhkan ke kiri dan kanan. Saya percaya bahwa teman -teman yang sering menelusuri halaman web juga memperhatikan hal ini. Mari kita bicara tentang beberapa penulisan dan efek dari suspensi. Mari kita bicara tentang beberapa penulisan dan efek dari suspensi.

~~Jika elemen anak ditangguhkan, itu akan menyebabkan elemen induk runtuh pada ketinggian. Bagian ini melibatkan pembersihan suspensi. Bab berikutnya akan menyebutkan penjelasan membersihkan suspensi.~~

Jadi kembali ke intinya,

Fenomena pertama float = inline-block

Suspensi akan menjadi gaya 4 blok menjadi mode blok inline: seperti yang ditunjukkan pada gambar di bawah ini

 <tyle> div {lebar: 200px; Tinggi: 200px; Latar Belakang-Color: Merah Muda; Perbatasan: 1px solid black; float: kiri; } </style>

 <body> <div> </div> <div> </div> <viv> </div> <viv> </div> <ver> </div> <viv> </div>

Fenomena kedua:

Seperti yang ditunjukkan pada gambar di bawah ini, karena yang pertama ditangguhkan, elemen blok kedua akan disajikan di bawah yang pertama.

Namun, elemen terakhir tidak akan menyeberang ke elemen sebelumnya, seperti elemen blok keempat, tetapi yang ketiga tidak akan ditangguhkan. Elemen blok musim keempat tetap berada di posisi semula.

 <tyle> .first-one {float: left; Latar Belakang: Hijau; } .second-one {latar belakang-warna: ungu; } .thirt-one {background-color: blue; } .fourth-one {float: left; Latar Belakang: Gray; } div {lebar: 200px; Tinggi: 200px; Latar Belakang-Color: Merah Muda; Perbatasan: 1px solid black; font-size: 30px; } </style>

 <body> <v class = first-one> </div> <div class = Second-one> </div> <div class = Third-one> </div> <div class = fourth-one> </div> <div class = fourth-one> </div> </bod>

Fenomena ketiga:

Jika semua elemen melayang dan lebar yang tersisa dari elemen induk tidak cukup untuk mendukung pengaturan elemen anak di baris itu, maka itu akan terhubung ke tingkat atas

Artikel ini direproduksi dari: https://segmentfault.com/a/1190000022669455

Meringkaskan

Ini adalah akhir dari artikel ini tentang analisis singkat tentang penggunaan float floating HTML. Untuk konten float floating HTML yang lebih terkait, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!