Float Over Help dalam HTML

Saat membuat halaman Web untuk bisnis Anda menggunakan HTML dan kode CSS sederhana, Anda dapat menggunakan CSS untuk "divisi" gaya dan format dalam konten Anda - didefinisikan dalam kode HTML Anda - yang memungkinkan Anda untuk memformat teks dan gambar sedemikian rupa bahwa mereka "membungkus" atau menyesuaikan satu sama lain. Dengan kata lain, bagian dari konten Anda dapat menyesuaikan ke bagian lain, disusun sedemikian rupa sehingga gambar dan teks dapat cocok bersama sebagai kolom, kisi atau perataan lainnya.

HTML dan CSS

Sementara HTML menyajikan bahasa meta tag yang menentukan bagaimana halaman Web akan muncul dalam browser Web, kekuatan sebenarnya dari desain Web datang ketika Anda mencampur HTML dengan Cascading Style Sheets. CSS mendefinisikan perilaku untuk elemen yang tertanam dalam file HTML, menciptakan tata letak universal untuk halaman. Beberapa dokumen HTML dapat merujuk ke halaman CSS yang sama, artinya Anda dapat menerapkan tampilan reguler di semua halaman Anda.

Divisi HTML dan Floating

CSS bekerja dengan HTML dengan mendefinisikan perilaku tag HTML. Secara khusus, CSS memanfaatkan tag "". Tag divisi ini mengelilingi bagian dari dokumen, dan mengidentifikasinya sebagai unit informasi terpisah yang harus memiliki gaya yang sama. Divisi-divisi ini juga berfungsi sebagai semacam "kotak", dalam hal itu melalui CSS Anda dapat memiliki bagian-bagian yang mengubah warna konten, mengubah ukuran atau "melayang" ke batas halaman tertentu sehingga mengubah ukuran halaman tidak merusak tata letak.

Mengambang di CSS dan HTML

Untuk menggunakan atribut "float", Anda membuat divisi di konten Anda atau merujuk ke gambar. Dalam dokumen CSS Anda, Anda kemudian referensi div atau gambar dengan nama, dan berikan atribut float. Contoh kode berikut menunjukkan bagaimana menyelesaikan ini dengan style sheet internal. Perhatikan bahwa divisi dalam HTML, bernama "section1, " memiliki lebar 100 piksel. Semua divisi menggunakan float membutuhkan lebar yang ditentukan. Gambar sudah memiliki lebar tersirat:

Berikut adalah beberapa konten di dalam divisi

Hapus, Margin dan Padding

Bersamaan dengan dasar-dasar penggunaan atribut float, Anda juga dapat menggunakan item lain, seperti atribut clear, margin, dan padding. Atribut yang jelas memastikan bahwa tidak ada konten lain muncul di baris yang sama dengan elemen mengambang. Margin mengontrol ruang di sekitar ruang kiri dan bawah divisi. Padding mengontrol ruang internal di divisi antara konten dan batas-batas divisi. Ketiga item ini bersama-sama dapat membuat divisi yang bersih, "berbentuk kotak" yang memungkinkan atau tidak memungkinkan teks dan gambar lain membungkusnya.