Mari kita lihat desain grid situs dan uraikan masing-masing komponen. Mari kita telusuri mengapa float sangat berguna, serta teknik populer untuk membangun kisi web pertama dari tiga aliran dan footer situs.
Untuk mempelajari konstruksi grid suatu situs, Anda perlu memahami apa itu "aliran". Aliran adalah elemen situs, terletak satu demi satu. Misalnya, ini bisa berupa elemen div yang berjalan satu demi satu secara default. Tetapi alirannya dapat diatur ulang, dan posisi elemen balok dapat diubah.
Untuk mengontrol aliran, kami menggunakan properti float, yang dapat menempatkan blok di sisi kiri atau kanan. Cukup menulis dalam file CSS:
"nama kelas atau blok" {float: kanan / kiri; }
Satu-satunya kelemahan float adalah kemampuan untuk "tumpang tindih" satu blok di atas yang lain.
Untuk menghindari berlari, kami menggunakan clear: both - properti ini akan mengatur aliran di sekitar blok. Kami mengatur lebar dan tinggi, maksimum dan minimum, sehingga nilai yang terbentuk sesuai dengan ukuran konten (teks, gambar). Margin - atur nilainya menjadi otomatis sehingga margin eksternal terbentuk secara otomatis tergantung pada lokasi blok.
Karena pelampung dapat menempatkan balok di dua arah, biasanya membagi situs menjadi aliran - kiri dan kanan. Jika programmer hanya membutuhkan dua aliran, maka dia meninggalkan float kiri dan kanan, tetapi jika ada lebih dari dua, maka dia menyesuaikan margin menggunakan margin. Bagaimana ini terjadi:
.column1 {float: kiri; lebar: 65px; tinggi minimum: 50 piksel; margin-kanan: 9px; // 9px dari kotak tengah}
2 aliran:
.column2 {float: kiri; // ke blok kiri, tetapi tanpa "tumpang tindih", karena kita menerapkan lebar margin: 80px; tinggi minimum: 50 piksel; }
3 aliran:
.column3 {float: kanan; lebar: 65px; tinggi minimum: 50 piksel; }
Berurusan dengan footer (.footer):
.footer {hapus: keduanya; // membungkus kedua sisi}
Ini adalah bagaimana kami membuat grid untuk situs menggunakan float, yang terdiri dari tiga aliran.
