Cara membuat div bertambah tinggi sambil mengapung di dalamnya

121

Bagaimana saya bisa membuat div meningkatkan tingginya jika ada float di dalamnya? Saya tahu itu mendefinisikan nilai untuk lebar dan pengaturan overflow untuk pekerjaan tersembunyi. Masalahnya adalah saya membutuhkan div dengan overflow yang terlihat. Ada ide?

css html overflow css-float pedrozath
sumber

Jawaban:

278

overflow:auto;pada div yang berisi membuat semua yang ada di dalamnya (bahkan item mengambang) terlihat dan div luar membungkusnya sepenuhnya. Lihat contoh ini:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
Luaskan cuplikan

JakeParis
sumber
7
Ya, ini agak berhasil, tetapi memiliki bahaya menghasilkan bilah gulir .. bukan?
pedrozath
1
Tidak, aku tidak tahu tentang @pedro. Div luar seharusnya terus meluas untuk membungkus div bagian dalam. coba di biola, tingkatkan dimensi divs bagian dalam dan lihat apa yang terjadi.
JakeParis
2
Saya mencoba ini dan bilah gulir kecil sekitar 2em muncul di sebelah kanan jendela browser.
Nigel Alderton
1
@NigelAlderton ini terjadi pada saya karena saya memaksakan ketinggian container (tempat overflowditambahkannya). Memperbaiki dengan menghapus overflow: auto;dari kelas, serta heightpemilih
eggy
16

Ada lebih dari satu cara untuk membersihkan pelampung. Anda dapat memeriksanya di sini:
http://work.arounds.org/issue/3/clearing-floats/

Misalnya, clear:bothmungkin berhasil untuk Anda

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
Nikita Rybak
sumber
1
Manfaat dari pendekatan ini adalah overflow: auto;klip konten (seperti dekorasi fokus) yang meluap keluar elemen, tetapi ini tidak akan terjadi.
Dan
overflow: otomatis membuat scrollbar horizontal untuk saya, jadi saya tidak dapat menggunakannya. Ini bekerja dengan sempurna.
Edwin Stoteler
Persis apa yang saya cari. Menerapkan CSS ini ke induknya. Ini memperluas tinggi induk <div>, sehingga elemen mengambang tetap berada di dalamnya. Elegan, karena dengan jelas menyatakan bahwa: "bagian bawah induk harus bersih dari pelampung."
IAM_AL_X
12

Dalam banyak kasus, overflow: auto;itu sudah cukup, tetapi demi penyelesaian dan dukungan lintas browser, lihat Clearfix yang akan melakukan pekerjaan untuk semua browser.

Mari pertimbangkan markup berikut ..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Seiring dengan gaya berikut ..

.content { float:left; }

.clearfix { ..from link.. }

Tanpa clearfix, induk divtidak akan memiliki ketinggian karena anak-anaknya mengambang. Clearfix akan membuat orang tua mempertimbangkan anak mengambang.

miphe
sumber
2
Clearfix adalah markup ekstra. Cukup beri markup div indukoverflow: auto;
JakeParis
7

Saya pikir cara terbaik untuk melakukannya adalah dengan mengatur display: tablediv.

pedrozath
sumber