Elemen melayang tidak menambah ketinggian elemen wadah, dan karenanya jika Anda tidak membersihkannya, tinggi wadah tidak akan meningkat ...
Saya akan menunjukkan kepada Anda secara visual:
Penjelasan Lebih Lanjut:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
Anda juga dapat menambahkan overflow: hidden;elemen kontainer, tetapi saya sarankan Anda menggunakannya clear: both;sebagai gantinya.
Juga jika Anda mungkin ingin membersihkan sendiri elemen yang dapat Anda gunakan
.self_clear:after {
content: "";
clear: both;
display: table;
}
Bagaimana CSS Float Bekerja?
Apa itu float sebenarnya dan apa fungsinya?
The floatproperti disalahpahami oleh sebagian besar pemula. Apa yang sebenarnya floatdilakukan? Awalnya, floatproperti itu diperkenalkan untuk mengalir teks di sekitar gambar, yang melayang leftatau right. Berikut penjelasan lain dari @Madara Uchicha.
Jadi, apakah salah menggunakan floatproperti untuk menempatkan kotak berdampingan? Jawabannya adalah tidak ; tidak ada masalah jika Anda menggunakan floatproperti untuk mengatur kotak berdampingan.
Mengambang elemen inlineatau blocklevel akan membuat elemen berperilaku seperti inline-blockelemen.
DemoJika Anda melayang elemen leftatau right, widthelemen akan terbatas pada konten yang dimilikinya, kecuali widthdidefinisikan secara eksplisit ...
Anda tidak dapat floatsebuah elemen center. Ini adalah masalah terbesar yang selalu saya lihat dengan pemula, menggunakan float: center;floatproperti. floatumumnya digunakan untuk float/ memindahkan konten ke paling kiri atau ke paling kanan . Hanya ada empat nilai yang valid untuk floatyaitu properti left, right, none(default) dan inherit.
Elemen induk runtuh, ketika mengandung elemen anak melayang, untuk mencegah hal ini, kami menggunakan clear: both;properti, untuk menghapus elemen melayang di kedua sisi, yang akan mencegah runtuhnya elemen induk. Untuk informasi lebih lanjut, Anda dapat merujuk jawaban saya yang lain di sini .
(Penting) Pikirkan di mana kita memiliki tumpukan berbagai elemen. Ketika kita menggunakan float: left;atau float: right;elemen bergerak di atas tumpukan dengan satu. Oleh karena itu elemen-elemen dalam aliran dokumen normal akan bersembunyi di balik elemen terapung karena berada di tingkat tumpukan di atas elemen terapung normal. (Tolong jangan menghubungkan ini z-indexkarena itu sama sekali berbeda.)
Mengambil kasus sebagai contoh untuk menjelaskan bagaimana CSS mengapung bekerja, dengan asumsi kita membutuhkan tata letak 2 kolom sederhana dengan header, footer, dan 2 kolom, jadi di sini seperti apa cetak biru itu terlihat ...
Dalam contoh di atas, kami hanya akan mengapungkan kotak merah, baik Anda bisa floatke left, atau Anda bisa floatke left, dan yang lain rightjuga, tergantung pada tata letak, jika 3 kolom, Anda dapat float2 kolom ke lefttempat lain satu ke yang righttergantung, meskipun dalam contoh ini, kita memiliki tata letak 2 kolom yang disederhanakan sehingga floatsatu ke leftdan yang lainnya ke right.
Markup dan gaya untuk membuat tata letak dijelaskan lebih jauh ke bawah ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Mari kita selangkah demi selangkah dengan tata letak dan melihat bagaimana float bekerja ..
Pertama-tama, kita menggunakan elemen pembungkus utama, Anda hanya bisa berasumsi bahwa itu Anda viewport, maka kita gunakan headerdan menetapkan heightdari 50pxsehingga tidak ada yang mewah di sana. Itu hanya elemen level blok non floated normal yang akan memakan 100%ruang horisontal kecuali jika itu melayang atau kita tetapkan inline-blockuntuk itu.
Nilai valid pertama floatadalah leftsehingga dalam contoh kita, kita gunakan float: left;untuk .floated_left, jadi kami berniat untuk mengapung blok ke leftelemen kontainer kami.
Kolom melayang ke kiri
Dan ya, jika Anda melihat, elemen induk, yang .wrapperruntuh, yang Anda lihat dengan perbatasan hijau tidak membesar, tetapi seharusnya benar? Akan kembali ke itu sebentar lagi, untuk saat ini, ada kolom yang sudah kami kirim left.
Datang ke kolom kedua, biarkan yang floatini keright
Kolom lain melayang ke kanan
Di sini, kami memiliki 300pxkolom lebar yang kami floatke right, yang akan duduk di samping kolom pertama saat melayang ke left, dan karena itu melayang ke left, itu menciptakan selokan kosong ke right, dan karena ada banyak ruang di right, kami rightelemen melayang duduk dengan sempurna di samping yang leftsatu.
Tetap saja, elemen induknya diciutkan, yah, mari kita perbaiki sekarang. Ada banyak cara untuk mencegah elemen induk agar tidak runtuh.
- Tambahkan elemen level blok kosong dan gunakan
clear: both;sebelum elemen induk berakhir, yang menampung elemen clearapung , sekarang yang ini adalah solusi murah untuk elemen apung Anda yang akan melakukan pekerjaan untuk Anda, tetapi, saya sarankan untuk tidak menggunakan ini.
Tambahkan, <div style="clear: both;"></div>sebelum .wrapper divujungnya, seperti
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Demo
Nah, itu memperbaiki dengan sangat baik, tidak ada lagi orang tua yang runtuh, tetapi hal itu menambah markup yang tidak perlu ke DOM, jadi beberapa menyarankan, untuk digunakan overflow: hidden;pada elemen induk yang memegang elemen anak melayang yang berfungsi sebagaimana dimaksud.
Gunakan overflow: hidden;pada.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Demo
Itu menyelamatkan kita sebuah elemen setiap kali kita perlu clear floattetapi ketika saya menguji berbagai kasus dengan ini, itu gagal dalam satu kasus tertentu, yang digunakan box-shadowpada elemen anak.
Demo (Tidak dapat melihat bayangan di keempat sisi,overflow: hidden;menyebabkan masalah ini)
Jadi bagaimana sekarang? Simpan elemen, jangan overflow: hidden;gunakan hack fix yang jelas, gunakan snippet di bawah ini di CSS Anda, dan sama seperti yang Anda gunakan overflow: hidden;untuk elemen induk, panggil elemen di classbawah ini pada elemen induk untuk membersihkan sendiri.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Demo
Di sini, bayangan berfungsi sebagaimana dimaksud, juga, membersihkan sendiri elemen induk yang mencegahnya runtuh.
Dan terakhir, kami menggunakan footer setelah kami clearelemen melayang.
Demo
Kapan float: none;digunakan, karena ini adalah default, jadi ada gunanya untuk menyatakan float: none;?
Yah, itu tergantung, jika Anda pergi untuk desain responsif, Anda akan menggunakan nilai ini banyak kali, ketika Anda ingin elemen melayang Anda membuat satu di bawah yang lain pada resolusi tertentu. Untuk itu float: none;properti berperan penting di sana.
Beberapa contoh dunia nyata tentang bagaimana floatberguna.
- Contoh pertama yang telah kita lihat adalah membuat satu atau lebih dari satu tata letak kolom.
- Menggunakan
imgmelayang di dalam pyang akan memungkinkan konten kita untuk mengalir.
Demo (Tanpa mengambangimg)
Demo 2 (imgmelayang keleft)
- Menggunakan
floatuntuk membuat menu horisontal - Demo
Float elemen kedua juga, atau gunakan `margin`
Terakhir tetapi tidak sedikit, saya ingin menjelaskan kasus khusus ini di mana Anda floathanya elemen tunggal untuk lefttetapi Anda tidak floatyang lain, jadi apa yang terjadi?
Misalkan jika kita menghapus float: right;dari kita .floated_right class, maka divakan diberikan dari ekstrem leftkarena tidak melayang.
Demo
Jadi dalam hal ini, Anda dapat floatke leftjuga
ATAU
Anda dapat menggunakan margin-leftyang akan sama dengan ukuran kolom melayang kiri yaitu 200pxlebar .