Pertanyaan Bagaimana Anda membuat orang tua dari elemen mengambang dari kolaps? [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Meskipun elemen suka <div>biasanya tumbuh sesuai isi mereka, menggunakan float properti dapat menyebabkan masalah yang mengejutkan bagi pemula CSS: jika elemen mengambang memiliki elemen induk yang tidak mengambang, orang tua akan runtuh.

Sebagai contoh:

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Div tua dalam contoh ini akan tidak berkembang mengandung anak-anak yang dilayang-layang - itu akan muncul untuk memiliki height: 0.

Bagaimana Anda menyelesaikan masalah ini?

Saya ingin membuat daftar solusi lengkap di sini. Jika Anda mengetahui masalah kompatibilitas lintas-browser, harap tunjukkan. 

Solusi 1

Mengapung orang tua.

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Pro: Kode Semantik.
Cons: Anda mungkin tidak selalu ingin orang tua melayang. Bahkan jika Anda melakukannya, apakah Anda mengapungkan orang tua orang tua, dan seterusnya? Haruskah Anda mengapung setiap elemen leluhur?

Solusi 2

Beri tinggi eksplisit pada orang tua.

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Pro: Kode Semantik.
Cons: Tidak fleksibel - jika konten berubah atau browser diubah ukurannya, tata letak akan rusak.

Solusi 3

Tambahkan elemen "spacer" di dalam elemen induk, seperti ini:

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

Pro: Langsung ke kode.
Cons: Bukan semantik; div spacer hanya ada sebagai peretasan tata letak.

Solusi 4

Setel induk ke overflow: auto.

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Pro: Tidak membutuhkan div ekstra.
Cons: Sepertinya hack - bukan itu overflow tujuan properti yang disebutkan.

Komentar Saran lain?


877


asal


Jawaban:


Solusi 1:

Metode yang paling dapat diandalkan dan tidak mengganggu tampaknya ini:

Demo: http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Dengan sedikit penargetan CSS, Anda bahkan tidak perlu menambahkan kelas ke orang tua DIV.

Solusi ini kompatibel dengan IE8 sehingga Anda tidak perlu khawatir tentang browser yang lebih lama gagal.

Solusi 2:

Adaptasi pada solusi 1 telah disarankan dan adalah sebagai berikut:

Demo: http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

Solusi ini tampaknya kompatibel ke IE5.5 tetapi belum diuji.

Solusi 3:

Ini juga bisa diatur display: inline-block; dan width: 100%; untuk meniru elemen blok normal sementara tidak runtuh.

Demo: http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

Solusi ini harus kompatibel ke IE5.5 tetapi hanya diuji di IE6.


482



Saya biasanya menggunakan overflow: auto menipu; meskipun itu tidak, tegasnya, penggunaan yang dimaksudkan untuk meluap, itu aku s agak terkait - cukup untuk membuatnya mudah diingat, tentu saja. Arti dari float: left sendiri telah diperpanjang untuk berbagai penggunaan lebih signifikan daripada overflow dalam contoh ini, IMO.


66



Masalah terjadi ketika elemen mengambang berada di dalam kotak penampung, elemen itu tidak secara otomatis memaksa ketinggian kontainer menyesuaikan ke elemen mengambang. Ketika sebuah elemen mengambang, induknya tidak lagi mengandung karena pelampung dihapus dari aliran. Anda dapat menggunakan 2 metode untuk memperbaikinya:

  • { clear: both; }
  • clearfix

Setelah Anda memahami apa yang terjadi, gunakan metode di bawah ini untuk "perbaiki".

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Demonstrasi :)


18



Daripada menempatkan overflow:auto pada orang tua, masukkan overflow:hidden

CSS pertama yang saya tulis untuk setiap halaman web selalu:

div {
  overflow:hidden;
}

Maka saya tidak perlu khawatir tentang itu.


17



Ada beberapa versi dari clearfix, dengan Nicolas Gallagher dan Thierry Koblentz sebagai penulis kunci.

Jika Anda ingin dukungan untuk browser yang lebih lama, sebaiknya gunakan clearfix ini:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Dalam SCSS, Anda harus menggunakan teknik berikut:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Jika Anda tidak peduli tentang dukungan untuk browser yang lebih lama, ada versi yang lebih singkat:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

12



Meskipun kode tidak semantik sempurna, saya pikir itu lebih mudah untuk memiliki apa yang saya sebut "clearing div" di bagian bawah setiap kontainer dengan pelampung di dalamnya. Bahkan, saya telah memasukkan aturan gaya berikut di blok reset saya untuk setiap proyek:

.clear 
{
   clear: both;
}

Jika Anda styling untuk IE6 (tuhan membantu Anda), Anda mungkin ingin memberikan aturan ini ketinggian-tinggi dan tinggi 0px juga.


9



Solusi ideal akan digunakan inline-block untuk kolom bukannya mengambang. Saya pikir dukungan browser cukup bagus jika Anda mengikuti (a) berlaku inline-block hanya untuk elemen yang biasanya segaris (mis span); dan (b) tambahkan -moz-inline-box untuk Firefox.

Periksa halaman Anda di FF2 juga karena saya punya banyak masalah ketika menumpuk elemen-elemen tertentu (yang mengejutkan, ini adalah satu kasus di mana kinerja IE jauh lebih baik daripada FF).


9



Aneh tidak ada yang menemukan jawaban lengkap untuk ini, ah, ini dia.

Solusi satu: jelas: keduanya

Menambahkan elemen blok dengan gaya yang jelas: keduanya; ke atasnya akan menghapus float melewati titik itu dan menghentikan induk dari elemen itu dari runtuh. http://jsfiddle.net/TVD2X/1/

Kelebihan: Memungkinkan Anda untuk menghapus elemen dan elemen yang Anda tambahkan di bawah ini tidak akan dipengaruhi oleh elemen mengambang di atas dan css yang valid.

Cons: Membutuhkan tag lain untuk membersihkan float, markup kembung.

Catatan: Untuk jatuh kembali ke IE6 dan untuk bekerja pada orang tua yang berpuasa (yaitu elemen input) Anda tidak dapat menggunakan: setelah.

Solusi dua: display: tabel

Menambahkan tampilan: tabel; kepada orang tua untuk membuatnya terhindar dari pelampung dan menampilkan dengan ketinggian yang tepat. http://jsfiddle.net/h9GAZ/1/

Kelebihan: Tidak ada markup tambahan dan jauh lebih rapi. Bekerja di IE6 +

Cons: Membutuhkan css yang tidak valid untuk memastikan semuanya berjalan baik di IE6 dan 7.

Catatan: IE6 dan 7 lebar otomatis digunakan untuk mencegah lebar menjadi 100% + padding, yang tidak terjadi di browser yang lebih baru.

Catatan tentang "solusi" lainnya

Perbaikan ini bekerja kembali ke browser yang didukung terendah, lebih dari 1% penggunaan global (IE6), yang berarti menggunakan: setelah tidak memotongnya.

Overflow hidden memang menunjukkan konten tetapi tidak mencegah elemen dari runtuh dan jadi tidak menjawab pertanyaan. Menggunakan blok inline dapat memiliki hasil buggy, anak-anak memiliki margin yang aneh dan sebagainya, meja jauh lebih baik.

Mengatur ketinggian tidak "mencegah" keruntuhan tetapi itu bukan perbaikan yang tepat.

Css tidak valid

Css tidak pernah menyakiti siapa pun, pada kenyataannya, sekarang adalah norma. Menggunakan awalan browser juga tidak valid karena menggunakan peretasan khusus peramban dan tidak memengaruhi pengguna akhir apa pun yang pernah ada.

Kesimpulannya

Saya menggunakan kedua solusi di atas untuk membuat elemen bereaksi dengan benar dan bermain dengan baik satu sama lain, saya mohon Anda untuk melakukan hal yang sama.


9