210

Saya ingin bertanya bagaimana ketinggian dan pelampung bekerja. Saya memiliki div luar dan div batin yang memiliki konten di dalamnya. Tingginya dapat bervariasi tergantung pada isi div bagian dalam tetapi tampaknya div bagian dalam saya akan meluap bagian luarnya. Apa cara yang tepat untuk melakukannya?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    	    <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>

html css css-float Boy Pasmo
sumber

kemungkinan duplikat CSS: ketinggian minimum tidak berfungsi atau CSS: Masalah ketinggian Div pada perangkat float

Shauna

bagus dan terima kasih sangat baik!

Bassam Alugili

kemungkinan duplikat benda mengambang dalam div, mengapung di luar div. Mengapa?

Oriol

581

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:

masukkan deskripsi gambar di sini

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.
Demo
Jika 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;~~, yang bukan nilai yang valid untuk 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 ...

masukkan deskripsi gambar di sini

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 .

Pak Alien
sumber

3

Fakta bahwa mengapung tidak berkontribusi pada ketinggian induk level blok secara eksplisit dinyatakan di sini dalam spesifikasi: w3.org/TR/CSS21/visudet.html#normal-block Alasan mengapa menambahkan clearfix berfungsi adalah karena 1) Clearfix adalah (biasanya) dalam aliran normal 2) kliring float mensyaratkan bahwa clearfix ditempatkan di bagian paling bawah dari floats 3) wadah harus ditarik untuk mengandung clearfix itu.

BoltClock

@BoltClock akan lebih baik jika Anda memutar kembali judul edit karena akan sangat mempengaruhi seo untuk pengguna yang menemukan cara kerja float .. Anda dapat menulis istilah-istilah itu di google dan memeriksa .. lain jawaban kanonik ini tidak ada gunanya jika orang tidak dapat menemukan apa yang mereka cari.

Tn. Alien

"Bagaimana cara kerja CSS float?" adalah judul yang sangat luas, dan itu juga menyesatkan orang untuk memilih untuk menutup sembarang pertanyaan mengambang sebagai penipu dari yang ini. Pertanyaan di sini hanya mencakup satu aspek: pembungkus kontainer (atau tidak pembungkus) mengapung.

BoltClock

@BoltClock Bagaimanapun teknisnya tetap sama seperti yang dijelaskan dalam clear: both;, tapi tidak apa-apa jika Anda merasa suntingan dibenarkan jadi mari kita tetap seperti itu

Tn. Alien

1

jawaban yang brilian. "Mengambang elemen apa pun ke kiri atau kanan, lebar elemen akan terbatas pada konten yang dimilikinya, kecuali lebar didefinisikan secara eksplisit" - saya mengamati hal yang sama dan hanya mencari ini untuk dikonfirmasi. Terima kasih

Deen John

38

Anda perlu menambahkan overflow:autodiv orang tua Anda agar dapat mencakup bagian dalam floated div:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

contoh jsFiddle

j08691
sumber

6

ini bukan solusi, Anda menyembunyikan konten yang keluar dari batas dari div luar.

Alejandro Ruiz Arias

@AlejandroRuizArias - Persisnya bagaimana sesuatu disembunyikan?

j08691

3

Dalam contoh ini tidak ada, tetapi jika Anda memperkenalkan konten yang cukup dalam div batin ya.

Alejandro Ruiz Arias

Ini tidak melakukan apa yang dicari OP: Forked jsfiddle.net/h0ceb5ra

TecBrat

1

Luar biasa. Solusi satu atribut yang saya cari, jika semuanya mudah, tidak perlu menyusut.

YK

10

Anda menjumpai bug float (meskipun saya tidak yakin apakah itu bug secara teknis karena berapa banyak browser menunjukkan perilaku ini). Inilah yang terjadi:

Dalam keadaan normal, dengan asumsi bahwa tidak ada ketinggian eksplisit telah ditetapkan, elemen level blok seperti div akan mengatur ketinggiannya berdasarkan kontennya. Bagian bawah div induk akan melampaui elemen terakhir. Sayangnya, mengapung sebuah elemen menghentikan induk dari memperhitungkan elemen yang melayang saat menentukan tingginya. Ini berarti bahwa jika elemen terakhir Anda melayang, itu tidak akan "meregangkan" induknya seperti halnya elemen normal.

Membersihkan

Ada dua cara umum untuk memperbaikinya. Yang pertama adalah menambahkan elemen "kliring"; yaitu, elemen lain di bawah yang melayang yang akan memaksa orang tua untuk meregangkan. Jadi tambahkan html berikut sebagai anak terakhir:

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

Seharusnya tidak terlihat, dan dengan menggunakan clear: keduanya, Anda memastikan bahwa itu tidak akan duduk di sebelah elemen melayang, tetapi setelah itu.

Meluap:

Metode kedua, yang disukai oleh kebanyakan orang (saya pikir) adalah mengubah CSS dari elemen induk sehingga overflow sama sekali tidak "terlihat". Jadi pengaturan overflow ke "tersembunyi" akan memaksa orang tua untuk meregangkan bagian bawah anak melayang. Ini hanya benar jika Anda belum menetapkan ketinggian pada induknya, tentu saja.

Seperti yang saya katakan, metode kedua lebih disukai karena tidak mengharuskan Anda untuk pergi dan menambahkan elemen semantik yang tidak berarti ke markup Anda, tetapi ada kalanya Anda perlu overflowterlihat, dalam hal menambahkan elemen kliring lebih dari dapat diterima .

Malorik
sumber

3

Itu karena pelampung div. Tambahkan overflow: hiddenpada elemen luar.

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

Starx
sumber

3

Anda bingung bagaimana browser merender elemen ketika ada elemen mengambang. Jika satu elemen blok mengambang (div bagian dalam Anda dalam kasus Anda), elemen blok lainnya akan mengabaikannya karena browser menghapus elemen mengambang dari aliran normal halaman web. Kemudian, karena div yang melayang telah dihapus dari aliran normal, div luar diisi, seperti div bagian dalam tidak ada. Namun, elemen sebaris (gambar, tautan, teks, blackquote) akan menghormati batas-batas elemen mengambang. Jika Anda memperkenalkan teks di div luar, teks akan menempatkan arround de inner div.

Dengan kata lain, elemen blok (header, paragraf, div, dll) mengabaikan elemen mengambang dan mengisi, dan elemen sebaris (gambar, tautan, teks, dll) menghormati batas-batas elemen mengambang.

Contoh biola di sini

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

Alejandro Ruiz Arias
sumber

3

Jangan sorot teks dan bagikan tautan biola, poskan kode dalam jawaban Anda di lain waktu, karena jika tautan biola sudah mati, pengguna di masa depan tidak akan mendapatkan bantuan di sini dan jawaban Anda tidak akan ada artinya

Tn. Alien

2

Coba yang ini

.parent_div{
    display: flex;
}

Yusufbek
sumber

1

Anda dapat menggunakan properti overflow ke div kontainer jika Anda tidak memiliki div untuk ditampilkan di atas kontainer misalnya:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

Berikut ini css berikut:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------ATAU-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

Berikut ini css berikut:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

Nishant Rana
sumber

Mengapa ketinggian elemen wadah tidak bertambah jika mengandung elemen melayang?

Jawaban:

Bagaimana CSS Float Bekerja?

Apa itu float sebenarnya dan apa fungsinya?

Float elemen kedua juga, atau gunakan `margin`