274

Katakanlah Anda memiliki div, berikan yang pasti widthdan letakkan elemen di dalamnya, dalam kasus saya imgdan lainnya div.

Idenya adalah bahwa konten wadah divakan menyebabkan wadah divuntuk meregang, dan menjadi latar belakang untuk konten tersebut. Tetapi ketika saya melakukan ini, isi divmenyusut agar sesuai dengan benda-benda yang tidak mengambang, dan benda-benda mengambang akan baik semua jalan keluar, atau setengah keluar, setengah masuk, dan tidak memiliki bantalan pada ukuran besar div.

Kenapa ini? Apakah ada sesuatu yang saya hilang, dan bagaimana saya bisa item untuk meregangkan melayang heightdari mengandung div?

css html css-float DavidR
sumber

398

Cara termudah adalah memakai overflow:hiddendiv induk dan jangan tentukan ketinggian:

#parent { overflow: hidden }

Cara lain adalah dengan juga mengapung div induk:

#parent { float: left; width: 100% }

Cara lain menggunakan elemen yang jelas:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

Doug Neiner
sumber

17

Ini bekerja, tapi sekarang saya dua kali lebih bingung: apakah ada penjelasan untuk ini atau apakah ini memang benar?

DavidR

8

Ya, ada penjelasan tapi saya sudah lupa :( Begitulah adanya. overflow:hiddenKekuatan browser yang terbaik untuk mengandung elemen anak dari orang tua. Itulah mengapa ia memperbaikinya.

Doug Neiner

5

Saya pikir penjelasannya overflow: hiddenada di sini: tautan . Dan terima kasih banyak, itu berhasil untuk saya

Vikas Arora

6

@ DavidvidR Penjelasan termudah adalah bahwa html / css adalah tanggal, kurang dipikirkan, dan teknologi yang diimplementasikan dengan buruk. Sebenarnya, alasan ini sebenarnya menjelaskan banyak quirks html / css yang tidak diragukan lagi Anda temui sejak Anda membuat posting ini.

Sedikit

1

Ingatlah bahwa overflow: hiddenitu hanya akan menyembunyikan bagian mana pun dari elemen yang mengalir keluar dari wadah induk. Bagi saya, ini menyebabkan potongan teks tertentu menjadi tidak dapat dibaca.

Top Cat

160

Alasan

Masalahnya adalah bahwa elemen apung tidak mengalir :

Suatu elemen disebut out of flow jika ia melayang, diposisikan secara absolut, atau merupakan elemen root.

Oleh karena itu, mereka tidak mempengaruhi elemen sekitarnya seperti elemen in-flow .

Ini dijelaskan dalam 9.5 Floats :

Karena float tidak ada dalam aliran, kotak blok yang tidak diposisikan dibuat sebelum dan sesudah float box mengalir secara vertikal seolah float tidak ada. Namun, kotak garis saat ini dan selanjutnya yang dibuat di sebelah float dipersingkat seperlunya untuk memberikan ruang bagi kotak margin float.

Tampilkan cuplikan kode

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

Luaskan cuplikan

Ini juga ditentukan dalam 10.6 Menghitung ketinggian dan margin . Untuk blok "normal" ,

Hanya anak-anak dalam aliran normal yang diperhitungkan (yaitu, kotak mengambang dan kotak yang diposisikan benar-benar diabaikan [...])

Tampilkan cuplikan kode

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Luaskan cuplikan

Solusi peretasan: pembersihan

Cara untuk mengatasi masalah ini adalah dengan memaksa beberapa elemen dalam-aliran ditempatkan di bawah semua pelampung. Kemudian, ketinggian induk akan tumbuh untuk membungkus elemen itu (dan dengan demikian mengapung juga).

Hal ini dapat dicapai dengan menggunakan satu clearproperti :

Properti ini menunjukkan sisi mana dari kotak elemen yang tidak berdekatan dengan kotak mengambang sebelumnya.

Tampilkan cuplikan kode

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: 'Block sibling with clearance';
  color: pink;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

Luaskan cuplikan

Jadi solusinya adalah menambahkan elemen kosong dengan clear: bothsebagai saudara terakhir dari pelampung

<div style="clear: both"></div>

Namun, itu bukan semantik. Jadi lebih baik menghasilkan elemen pseudo di akhir induk:

.clearfix::after {
  clear: both;
  display: block;
}

Ada beberapa varian dari pendekatan ini, misalnya menggunakan sintaks kolon tunggal yang sudah tidak digunakan lagi :after untuk mendukung browser lama, atau menggunakan tampilan level blok lainnya seperti display: table.

Solusi: BFC root

Ada pengecualian untuk perilaku bermasalah yang didefinisikan di awal: jika elemen blok membentuk a Konteks Pemformatan Blok (adalah root BFC), maka ia juga akan membungkus konten apungnya.

Berdasarkan ketinggian 10.6.7 'Otomatis' untuk akar konteks pemformatan blok ,

Jika elemen memiliki keturunan terapung yang tepi margin bawahnya di bawah tepi konten bawah elemen, maka tinggi meningkat untuk menyertakan tepi tersebut.

Tampilkan cuplikan kode

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: 'BFC parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Luaskan cuplikan

Selain itu, seperti yang dijelaskan 9.5 Mengapung , akar BFC juga berguna karena hal berikut:

Kotak batas tabel, elemen yang diganti level blok, atau elemen dalam aliran normal yang membentuk konteks format blok baru [...] tidak boleh tumpang tindih kotak margin dari pelampung apa pun dalam konteks format blok yang sama dengan elemen itu sendiri .

Tampilkan cuplikan kode

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

Luaskan cuplikan

Konteks pemformatan blok ditetapkan oleh

Memblokir kotak dengan overflowselain visible, misalnyahidden

.bfc-root {
  overflow: hidden;
  /* display: block; */
}

Memblokir kontainer yang bukan kotak blok: kapan displaydiatur ke inline-block, table-cellatau table-caption.
```
.bfc-root {
  display: inline-block;
}
```
Elemen mengambang: kapan floatdiatur ke leftatau right.
```
.bfc-root {
  float: left;
}
```
Elemen yang benar-benar diposisikan: kapan positiondiatur ke absoluteatau fixed.
```
.bfc-root {
  position: absolute;
}
```

Perhatikan itu mungkin memiliki efek jaminan yang tidak diinginkan, seperti kliping konten yang meluap, menghitung lebar otomatis dengan algoritma shrink-to-fit , atau menjadi out-of-flow. Jadi masalahnya adalah tidak mungkin untuk memiliki elemen level blok in-flow dengan overflow yang terlihat yang membentuk BFC.

Tampilan L3 mengatasi masalah ini:

Dibuat tipe tampilan dalam flow dan untuk mengekspresikan tipe tampilan tata letak aliran yang lebih baik dan untuk membuat saklar eksplisit untuk menjadikan elemen sebagai root BFC . (Ini harus menghilangkan kebutuhan untuk hack seperti danflow-root ::after { clear: both; }overflow: hidden [...])

Sayangnya, belum ada dukungan browser. Akhirnya kita bisa menggunakan

.bfc-root {
  display: flow-root;
}

Oriol
sumber

1

Jadi kotak apung tidak dikenali oleh wadah induknya, karenanya tingginya runtuh, tetapi dikenali oleh saudara kandungnya, maka dari itu clearfix?

symlink

@symlink Ya, wadah induk tidak tumbuh untuk menutupi pelampung, kecuali jika itu adalah akar BFC. Saudara kandung yang bukan akar BFC tidak secara langsung dipengaruhi oleh blok (tetapi kotak garis mereka). Namun, clearance memindahkan mereka di bawah float sebelumnya.

Oriol

"Saudara kandung yang bukan akar BFC tidak secara langsung dipengaruhi oleh blok (tetapi kotak garis mereka)." - Bisakah Anda menjelaskan ini? Apakah maksud Anda Dalam jsFiddle ini: jsfiddle.net/aggL3Lk7/2 , gambar inline melayang tidak memengaruhi rentang (karenanya batas span menyokongnya) tetapi gambar memengaruhi teks (yang merupakan kotak garis) seperti yang ditunjukkan oleh fakta bahwa teks tidak tumpang tindih gambar?

symlink

1

@symlink Ya, tepatnya. Nah, di biola Anda perbatasan adalah milik orang tua, tetapi pada dasarnya akan sama untuk saudara kandung: jsfiddle.net/aggL3Lk7/3

Oriol

1

Saya setuju. Ini harus menjadi jawaban yang diterima. Sangat menarik bagi saya bahwa W3 memanggil cara kami dipaksa untuk kode "retasan". Seseorang mengacau.

DR01D

20

Letakkan apung Anda div(s)di dalam divdan di CSS berikan overflow:hidden;
itu akan berfungsi dengan baik.

Nad
sumber

Saya mencoba itu tetapi itu tidak menyelesaikan masalah saya: stackoverflow.com/questions/25329349/…

SearchForKnowledge

15

Rekomendasi W3Schools:

memakai overflow: autoelemen induk dan itu akan "warna" seluruh latar belakang termasuk elemen margin. Juga elemen mengambang akan tetap berada di dalam perbatasan.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

mggluscevic
sumber

11

Tidak ada yang hilang. Float dirancang untuk case di mana Anda ingin gambar (misalnya) untuk duduk di samping beberapa paragraf teks, sehingga teks mengalir di sekitar gambar. Itu tidak akan terjadi jika teks "meregangkan" wadah. Paragraf pertama Anda akan berakhir, dan kemudian paragraf berikutnya akan dimulai di bawah gambar (mungkin beberapa ratus piksel di bawah).

Dan itulah mengapa Anda mendapatkan hasilnya.

Lucas Wilson-Richter
sumber

3

Bagaimana hal itu ada hubungannya dengan elemen melayang dengan benar meregangkan ketinggian induk?

Sedikit

11

Dalam beberapa kasus, yaitu ketika (jika) Anda hanya menggunakan floatagar elemen mengalir pada "baris" yang sama, Anda mungkin menggunakan

display: inline-block;

dari pada

float: left;

Jika tidak, menggunakan clearelemen pada akhirnya berfungsi, bahkan jika itu bertentangan dengan kebutuhan elemen untuk melakukan apa yang seharusnya menjadi pekerjaan CSS.

LSerni
sumber

11

Berikut ini pendekatan yang lebih modern:

.parent {display: flow-root;}

Tidak ada lagi perbaikan yang jelas.

ps Menggunakan overflow: disembunyikan; menyembunyikan bayangan kotak jadi ...

pendingfox
sumber

Bekerja di Safari 11 juga

pendingfox

7

Terima kasih, LSerni Anda telah memecahkannya untuk saya.

Untuk mencapai ini:

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

Anda harus melakukan ini:

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

Flyout91
sumber

4

Seperti kata Lucas, apa yang Anda gambarkan adalah perilaku yang dimaksudkan untuk properti pelampung. Yang membingungkan banyak orang adalah bahwa float telah didorong jauh melampaui penggunaan aslinya yang dimaksudkan untuk menebus kekurangan dalam model tata letak CSS.

Lihatlah Floatutorial jika Anda ingin mendapatkan pemahaman yang lebih baik tentang cara kerja properti ini.

Sam Murray-Sutton
sumber

0

Anda dapat dengan mudah melakukannya dengan terlebih dahulu Anda dapat membuat div fleksibel dan menerapkan konten yang benar atau kiri dan masalah Anda terpecahkan.

<div style="display: flex;padding-bottom: 8px;justify-content: flex-end;">
					<button style="font-weight: bold;outline: none;background-color: #2764ff;border-radius: 3px;margin-left: 12px;border: none;padding: 3px 6px;color: white;text-align: center;font-family: 'Open Sans', sans-serif;text-decoration: none;margin-right: 14px;">Sense</button>
				</div>

Luaskan cuplikan

Vijay Tiwari
sumber

Elemen mengambang dalam div, mengapung di luar div. Mengapa?

Jawaban:

Alasan

Solusi peretasan: pembersihan

Solusi: BFC root