css float tidak membungkus

Dalam proses penciptaan halaman web, kami sering menggunakan atribut apungan CSS untuk menyusun berbilang elemen dalam baris atau lajur yang sama. Tetapi kadangkala elemen terapung ditugaskan ke baris seterusnya Pada masa ini, kita perlu menguasai beberapa kemahiran untuk mengelakkan elemen terapung daripada membalut.

1. Clear floats

Jika lebar tidak ditetapkan, elemen terapung akan menduduki lebar elemen induk secara lalai. Jika ketinggian elemen induk tidak mencukupi, elemen terapung akan "diperah" ke baris seterusnya. Jadi bagaimana untuk menyelesaikan masalah ini? Anda boleh menggunakan teknik apungan jelas. Kaedah biasa mengosongkan terapung adalah seperti berikut:

1 Gunakan clearfix

untuk menambah kelas "clearfix" dalam gaya CSS elemen induk, seperti ditunjukkan di bawah:

rreee<.> dalam HTML , tambahkan nama kelas "clearfix" pada elemen induk, seperti yang ditunjukkan di bawah:

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

2. Gunakan pseudo-classes untuk mengosongkan terapung

Tambah pseudo-class ":before " dalam gaya CSS elemen induk Atau ":selepas", seperti yang ditunjukkan di bawah:

<div class="clearfix">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

Dalam HTML, tambahkan nama kelas "induk" pada elemen induk, seperti ditunjukkan di bawah:

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

2. Gunakan paparan: inline-block

Selain mengosongkan terapung untuk mengelakkan elemen terapung daripada dibalut, anda juga boleh menggunakan atribut "display: inline-block". Atribut ini membolehkan elemen mempunyai ciri elemen peringkat blok sebaris Ketinggian boleh ditetapkan sambil mengekalkan paparan baris yang sama.

<div class="parent">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

3. Gunakan tetapan lebar

Jika elemen terapung mempunyai set lebar, ia akan dipaparkan pada baris yang sama walaupun elemen induk tidak cukup tinggi.

<div style="display: inline-block;">Inline-block</div>
<div style="display: inline-block;">Inline-block</div>

4. Gunakan reka letak fleksibel

Reka letak fleksibel ialah kaedah reka letak yang disediakan oleh CSS3, yang sangat mudah apabila berbilang elemen disusun dalam baris atau lajur yang sama. Untuk menggunakan reka letak fleksibel, anda hanya perlu menetapkan atribut "display: flex" pada elemen induk untuk membolehkan elemen anak melakukan reka letak adaptif.

<div style="width: 50%; float: left;">Left Float</div>
<div style="width: 50%; float: left;">Right Float</div>

Di atas adalah beberapa cara untuk mengelakkan elemen terapung daripada membalut Anda boleh memilih kaedah yang sesuai dengan anda mengikut situasi sebenar.

Atas ialah kandungan terperinci css float tidak membungkus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!