Apakah perkara yang perlu anda perhatikan apabila mengapungkan elemen css?

Nota: 1. Sempadan luar kiri unsur terapung tidak boleh melebihi sempadan dalam kiri bagi blok kandungannya, dan begitu juga dengan sempadan luar kanan 2. Bahagian atas unsur terapung tidak boleh lebih tinggi daripada bahagian dalam elemen induknya ; , elemen terapung yang betul mestilah sejauh mungkin ke kanan, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Apung dalam css:

Dalam css, untuk mengalihkan elemen ke kiri atau kanan elemen induk, kita boleh menetapkan apungan pada unsur terapung.

apung:kiri/kanan

Terdapat dua pilihan terapung, satu apungan:kiri kiri terapung. Terdapat juga float:right right float

Jika float ditetapkan kepada elemen, maka elemen akan berpisah daripada aliran dokumen standard dan elemen di belakang elemen akan menduduki kedudukan asal elemen, dan unsur di belakangnya akan kandungan akan diperah keluar.

Elemen dengan apungan ditambah tidak mempunyai lebar dan tinggi, dan ketinggian elemen induk bagi elemen itu juga akan dipaparkan, iaitu ketinggian runtuh. Lebar dan tinggi elemen dengan apungan ditambah ialah berdasarkan keperluan dinamik kandungan di dalam elemen yang berubah. Untuk menetapkan semula ketinggian elemen induknya.

Jika dibiarkan terapung ditetapkan untuk beberapa elemen, maka elemen ini akan dipaparkan dalam baris yang sama, tetapi jika jumlah lebar elemen ini lebih besar daripada elemen induk, bahagian lebihan ( termasuk elemen) akan berada di bawah Satu baris dipaparkan.

Peraturan yang mengapungkan elemen perlu dipatuhi (nota)

• Sempadan luar kiri unsur terapung tidak boleh melebihi sempadan dalam kiri blok yang mengandunginya, dan perkara yang sama berlaku untuk kanan

• Untuk mengelakkan elemen daripada menutup satu sama lain, sempadan luar kiri (atau kanan) unsur terapung mestilah terapung kiri sebelumnya ( Jidar luar kanan (atau kiri) unsur terapung kanan, melainkan bahagian atas unsur terapung kemudian berada di bawah bahagian bawah unsur terapung pertama.
  

• Sempadan kiri luar unsur terapung mestilah sempadan kanan luar unsur terapung kiri yang muncul sebelum ini dalam fail sumber, melainkan bahagian atas unsur terapung yang muncul kemudian adalah sebelum bahagian atas elemen terapung yang muncul pertama di bawah bahagian bawah.

• Sempadan kanan luar unsur terapung kiri tidak kelihatan di sebelah kanan sempadan kiri luar unsur terapung kanan di sebelah kanannya.

• Atas unsur terapung tidak boleh lebih tinggi daripada bahagian atas dalam induknya

• Atas unsur terapung tidak boleh lebih tinggi daripada bahagian atas dalam elemen induknya atau Bahagian atas elemen peringkat blok lebih tinggi

• Jika elemen terapung mendahului elemen lain dalam dokumen sumber, bahagian atas elemen terapung tidak boleh lebih tinggi daripada atas mana-mana kotak baris yang mengandungi kotak yang dijana oleh elemen itu lebih tinggi.

• Unsur terapung tidak boleh melampaui batas unsur yang mengandunginya. Unsur terapung kiri (atau kanan) mempunyai unsur terapung lain di sebelah kiri (atau kanan), dan sempadan luar kanan bekas tidak boleh berada di sebelah kanan (atau kiri) sempadan kanan (atau kiri) blok yang mengandunginya. Jika ruang tidak mencukupi, elemen terapung akan dihimpit ke "baris" baharu

• Elemen terapung mesti diletakkan setinggi mungkin. Iaitu, di bawah premis untuk memenuhi kekangan lain, terapung setinggi mungkin.

• Elemen terapung kiri mestilah sejauh ke kiri yang mungkin, dan elemen terapung kanan mestilah sejauh mungkin ke kanan

Apung Peraturan pengisihan

• elemen terapung dalam arah yang sama dipaparkan di hadapan kerana elemen terapung hanya akan meliputi aliran standard .

• Elemen terapung dalam arah berbeza, terapung kiri ke kiri, terapung kanan ke kanan

• Kedudukan elemen terapung selepas terapung ditentukan oleh aliran standard sebelum elemen terapung terapung

• Fenomena melekat: Jika elemen terapung terakhir melebihi lebar elemen induk, ia akan mencari elemen seterusnya secara automatik dan melekatkannya. untuk itu. Jika lebar masih tidak mencukupi, teruskan melihat sebelumnya~ Jika lebar elemen induk masih tidak mencukupi, maka anda hanya boleh melakukannya

• Campur. grafik dan teks

Kosongkan apungan

• Tetapkan ketinggian elemen induk sebelumnya ( adalah lebih baik untuk tidak menetapkan ketinggian semasa pembangunan, jadi kemudahan ini tidak disyorkan)

• Tetapkan atribut yang jelas untuk elemen berikut (perhatikan bahawa atribut margin akan menjadi tidak sah selepas menambah atribut jelas)

• Kaedah partisi

  • Kaedah dinding luar

    Tambah elemen aras blok di tengah dan tetapkan jelas : kedua-duanya (Nota: Anda boleh menggunakan margin-atas dalam kotak kedua, tetapi anda tidak boleh menggunakan margin-bawah dalam kotak pertama , jadi secara amnya margin-bawah kotak pertama mahupun margin-atas kotak kedua tidak ditetapkan , tetapi ketinggian elemen aras blok tambahan ditetapkan terus)

  • Kaedah dinding dalam

    Tulis elemen aras blok ke hujung kotak pertama dan tetapkan jelas: kedua-duanya (nota: kotak pertama boleh menggunakan margin-bawah, dan kotak kedua juga boleh menggunakan margin-atas. Elemen tahap Blok Tambahan juga boleh menetapkan ketinggian)

  • Perbezaan: Kaedah dinding dalaman boleh menyokong ketinggian kotak pertama, tetapi kaedah dinding luar tidak boleh (Kaedah yang diubah suai juga tidak disyorkan kerana elemen tambahan ditambah)

Gunakan elemen pseudo (disyorkan)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

limpahan: tersembunyi (disyorkan)

.box1{
    *zoom: 1;   // 兼容IE6
}

( Mempelajari perkongsian video : tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Apakah perkara yang perlu anda perhatikan apabila mengapungkan elemen css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!