Bagaimanakah jelas berfungsi dalam CSS?

Nota: Saya baru sahaja menterjemah teks di bawah dan menyiarkannya di sini. Rujukan ada di penghujung artikel ini.

Sifat CSS jelas berfungsi berkenaan dengan apungan sifat CSS. Ia mentakrifkan sama ada elemen harus dialihkan di bawah elemen "terapung" yang mendahuluinya.

Mari kita fahami ini dengan bantuan contoh.

Kami akan mempertimbangkan empat blok merah, kuning, biru dan hijau yang akan ditambah satu demi satu dan kesemuanya akan diletakkan pada tahap yang sama.

Kemudian kita akan membuat setiap elemen "terapung" ke "kiri" satu demi satu, yang bermaksud ia akan dialihkan satu tahap di atas kedudukan awalnya. Ini akan membolehkan elemen "tidak terapung" lain membaluti elemen terapung.

Nota - Blok seterusnya akan menduduki kedudukan blok terapung, jadi ia tidak kelihatan. Apabila kita menukar dimensi blok seterusnya, kita perhatikan bahawa ia ditutup dengan blok terapung yang terdapat satu lapisan di atasnya.

Selepas itu, kami akan menggunakan clear:left pada blok biru, yang bermaksud tiada unsur akan terapung di sebelah kiri blok biru.

Dengan bantuan sifat CSS yang jelas, kami boleh menentukan bahagian mana unsur terapung tidak boleh melakukan apungan. Ia mentakrifkan atau mengembalikan kedudukan berhubung dengan objek terapung.

Nilai yang diterima dalam sifat CSS jelas

.element {
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;

    clear: inherit;
    clear: initial;
    clear: revert;
    clear: revert-layer;
    clear: unset;
}

Di bawah ialah kod untuk contoh yang ditunjukkan di atas:

HTML:

<div class="wrapper">
    <div class="red block"></div>
    <div class="yellow block"></div>
    <div class="blue block"></div>
    <div class="green block"></div>
</div>

CSS:

.wrapper{
    height:100vh;
    padding: 30px;
    text:center;
    background: #3A3B3C;
}
.block {
    height:40px;
    width:40px;
    border-radius: 4px;
}
.red {
    background: #CB6D51;
    float:left;
}
.yellow {
    background:#FBE7A1;
    float: left;
}
.blue {
    background: #3090C7;
    float: left;
    clear:both;
}
.green {
    background: #2E8B57;
    float: left;
}

Saya cuba membincangkan cara jelas sifat CSS berfungsi menggunakan contoh asas untuk pemahaman yang lebih baik. Sila kongsi contoh anda dan jangan ragu untuk menambah siaran ini?.

Selamat belajar!??‍?

Sumber

Artikel ditulis oleh Jasmin Virdi.

Atas ialah kandungan terperinci Bagaimanakah jelas berfungsi dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!