Overflow: wadah tersembunyi tidak berisi elemen melayang yang berdekatan

Wadah overflow: hidden saya tidak berisi elemen mengambang yang berdekatan (kotak oranye) di dalamnya.

Elemen melayang berada di samping wadah (bagian). Tetapi ketika saya menghapus overflow:hidden, elemen mengambang yang berdekatan akan masuk ke dalam wadah dan menghormati anak-anak wadah yang melayang.

Mengapa ini terjadi? Apakah ini ada hubungannya dengan konteks pemformatan blok?

Mungkin ketika saya menerapkan overflow: hidden; untuk wadahnya, itu memicu BFC baru dan hanya akan berisi turunannya dan tidak ada elemen mengambang yang berdekatan?

Ini adalah biola


html css overflow css-float
person Limpuls    schedule 16.08.2016    source sumber
comment
Pertanyaan yang mencari bantuan debugging harus menyertakan kode terpendek yang diperlukan untuk mereproduksinya dalam pertanyaan itu sendiri. NB - Harap jangan menyalahgunakan blok kode untuk mengakali persyaratan ini.   -  person Paulie_D    schedule 16.08.2016
comment
@Paulie_D Maaf, saya pengguna SO baru dan saya tidak mencoba menyiasati apa pun. Akan memperbaikinya.   -  person Limpuls    schedule 16.08.2016
comment
Selamat datang di Stack Overflow! Saya mengedit pertanyaan Anda dengan membaginya menjadi beberapa paragraf agar lebih mudah dibaca. Dengan backticks Anda dapat memformat kode (seperti CSS). Hyperlink dapat disematkan dengan tombol hyperlink. Harap tambahkan HTML yang relevan di dalam pertanyaan (tidak hanya di biola). Semoga beruntung!   -  person trincot    schedule 18.08.2016

Jawaban (1)


arrow_upward
1
arrow_downward

Saya rasa Anda sudah tahu jawabannya yaitu BFC. :)

Jika Anda memasukkan overflow (selain yang terlihat), maka itu akan membuat konteks pemformatan blok baru, dan itu tidak akan membuat container mengundang di elemen float yang berdekatan.

Itu sebabnya jika Anda menyimpan overflow: hidden div oranye berada di samping wadah.

Lihat ini:

CSS overflow: tersembunyi dengan float

Info BFC

person kukkuz    schedule 16.08.2016
comment
Oke, terima kasih atas beberapa informasinya. Tapi tahukah Anda mengapa kotak oranye diletakkan di samping wadah dengan begitu indah? Seperti, kenapa tidak tumpang tindih dengan elemen lain atau apa pun, tapi berada di samping bagian. - person Limpuls; 16.08.2016
comment
karena Anda belum mengatur lebar untuk section maka akan disesuaikan secara otomatis... coba atur lebarnya dan sekarang tidak akan pas di sampingnya. - person kukkuz; 17.08.2016
comment
@Limpuls hanya penasaran, jadi tindak lanjuti ini. Bisakah Anda memposting temuan Anda jika Anda dapat menggunakan ini dalam situasi praktis apa pun? Juga ingin jawaban Anda upvote/terima jika jawabannya membantu Anda. Terima kasih! - person kukkuz; 21.08.2016