Rumah hujung hadapan web html tutorial CSS清除浮动(float)的六种方法

CSS清除浮动(float)的六种方法

Mar 15, 2017 am 11:05 AM
terapung jelas

html

    <p>
        <p class=&#39;box-left&#39;></p>
        <p class=&#39;box-right&#39;></p>
    </p>
Salin selepas log masuk

css

    .box-left,.box-right{
        width:200px;
        height:200px;        float: left;
        background: red;
        border:1px solid #333;
    }
Salin selepas log masuk

第一种方法:.box{clear:box}

第二种方法:.box{overflow:hidden}

第三种方法:.box{overflow:auto}

 第四种方法:.box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1;}

第五种方法:.box{height:200px}设置高度

第六种方法:.box{display:table}

还有什么方法欢迎补充,加油,共同进步

 

Atas ialah kandungan terperinci CSS清除浮动(float)的六种方法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah 5 cara untuk membersihkan terapung? Apakah 5 cara untuk membersihkan terapung? Nov 20, 2023 pm 04:27 PM

Lima cara untuk mengosongkan apungan ialah: 1. Gunakan atribut jelas 2. Gunakan atribut limpahan 3. Gunakan pseudo clearfix 4. Gunakan susun atur grid; Pengenalan terperinci: 1. Gunakan atribut jelas, yang merupakan kaedah yang paling biasa digunakan untuk mengosongkan apungan Anda boleh menambah elemen selepas elemen terapung dan menambah "jelas: kedua-duanya;" menggunakan atribut limpahan tetapkan elemen induk Tetapkan "overflow: auto;" dan seterusnya.

Bagaimana untuk menyelaraskan kotak input dalam html Bagaimana untuk menyelaraskan kotak input dalam html Apr 05, 2024 am 10:18 AM

Kaedah menggunakan HTML untuk menjajarkan kotak input termasuk: menggunakan atribut penjajaran teks untuk menentukan kiri, kanan atau tengah untuk menjajarkan teks kotak input. Gunakan sifat apungan untuk mengapungkan kotak input ke sebelah kiri atau kanan halaman untuk mempengaruhi penjajaran relatifnya.

Adakah terdapat sebarang cara untuk membersihkan terapung? Adakah terdapat sebarang cara untuk membersihkan terapung? Feb 22, 2024 pm 04:00 PM

Adakah terdapat sebarang kaedah untuk mengosongkan apungan? Contoh kod khusus diperlukan Dalam reka letak halaman web, apungan ialah kaedah susun atur biasa yang membolehkan elemen memisahkan diri daripada aliran dokumen dan diposisikan secara relatif kepada elemen lain. Walau bagaimanapun, masalah yang sering dihadapi apabila menggunakan reka letak terapung ialah elemen induk tidak dapat membalut elemen terapung dengan betul, menyebabkan halaman mempunyai reka letak yang tidak teratur. Oleh itu, kita perlu mengambil langkah untuk membersihkan terapung supaya elemen induk dapat membalut elemen terapung dengan betul. Terdapat banyak cara untuk mengosongkan terapung Berikut akan memperkenalkan beberapa kaedah yang biasa digunakan dan memberikan contoh kod tertentu.

Apakah susun atur susun atur? Apakah susun atur susun atur? Feb 24, 2024 pm 03:03 PM

Susun atur merujuk kepada kaedah penetapan taip yang diguna pakai dalam reka bentuk web untuk menyusun dan memaparkan elemen halaman web mengikut peraturan dan struktur tertentu. Melalui reka letak yang munasabah, halaman web boleh dibuat lebih cantik dan kemas, dan mencapai pengalaman pengguna yang baik. Dalam pembangunan bahagian hadapan, terdapat banyak kaedah susun atur untuk dipilih, seperti susun atur meja tradisional, susun atur terapung, susun atur kedudukan, dll. Walau bagaimanapun, dengan promosi HTML5 dan CSS3, teknologi susun atur responsif moden, seperti susun atur Flexbox dan susun atur Grid, telah menjadi

Apakah cara untuk membersihkan terapung dalam css Apakah cara untuk membersihkan terapung dalam css Oct 30, 2023 am 11:57 AM

Cara untuk mengosongkan terapung dalam CSS termasuk atribut jelas, atribut limpahan, kelas pembaikan jelas, kelas pembaikan jelas bagi elemen induk, elemen pseudo untuk mengosongkan apungan, atribut limpahan elemen induk dan gabungan atribut jelas dan BFC. Pengenalan terperinci: 1. Gunakan atribut jelas, kaedah mudah dan biasa digunakan untuk mengosongkan terapung Dengan menambahkan elemen peringkat blok kosong selepas elemen terapung dan menetapkan atribut jelas untuknya, anda boleh mengosongkan kesan terapung sebelumnya dan menjadikannya. Unsur-unsur di bawah dibentangkan secara normal dan sebagainya.

Mengapa unsur terapung tidak boleh dibersihkan oleh harta limpahan Mengapa unsur terapung tidak boleh dibersihkan oleh harta limpahan Jan 27, 2024 am 08:08 AM

Untuk menganalisis sebab terapung tidak boleh dikosongkan menggunakan atribut limpahan, contoh kod khusus diperlukan Pengenalan: Dalam reka letak halaman web, masalah dengan elemen terapung sering dihadapi. Untuk menyelesaikan kesan unsur terapung, kami biasanya menggunakan kaedah membersihkan terapung. Walau bagaimanapun, kadangkala kami mendapati bahawa apungan tidak boleh dikosongkan dengan baik menggunakan atribut limpahan Artikel ini akan menyelidiki isu ini dan memberikan contoh kod khusus. 1. Mengapakah kita perlu mengosongkan pelampung? Elemen terapung bermaksud mengeluarkan elemen daripada aliran dokumen dengan menetapkan atribut apungan.

Mengapa apungan jernih limpahan tidak mempunyai kesan? Mengapa apungan jernih limpahan tidak mempunyai kesan? Oct 17, 2023 pm 02:29 PM

Sebab mengapa apungan pembersihan limpahan tidak sah mungkin kerana ketinggian elemen terapung tidak ditetapkan, elemen terapung dikosongkan, elemen penjelasan adalah sebelum elemen terapung, ketinggian elemen jelas tidak ditetapkan, atau elemen jelas adalah selepas unsur terapung, dsb. Pengenalan terperinci: 1. Ketinggian unsur terapung tidak ditetapkan Apabila ketinggian unsur terapung tidak ditetapkan, ia mungkin tidak dibersihkan Ketinggian unsur terapung ditentukan oleh kandungannya, jadi jika kandungannya tidak ketinggian, elemen terapung juga tidak mempunyai ketinggian; 2. Terapung Elemen dibersihkan, apabila elemen terapung dibersihkan, sifat limpahan mungkin tidak jelas dan sebagainya.

CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats Nov 18, 2023 am 10:56 AM

CSS terapung dan membersihkan terapung: Menguasai kemahiran terapung dan membersihkan terapung memerlukan contoh kod khusus Dalam reka bentuk dan pembangunan web, CSS terapung (float) adalah salah satu teknik susun atur yang biasa. Anda boleh menggunakan apungan untuk mengalihkan elemen ke kiri atau kanan untuk melaraskan dan menyusun elemen pada halaman. Walau bagaimanapun, unsur terapung juga boleh menyebabkan beberapa masalah pada halaman, seperti ketinggian unsur induk runtuh, dsb. Oleh itu, adalah sangat penting untuk menguasai teknik menggunakan terapung dan membersihkannya. Artikel ini akan menumpukan pada apungan CSS dan teknik apungan yang jelas, dan memberikan khusus

See all articles