Apakah atribut yang membersihkan terapung dalam html5?

Dalam HTML5, atribut untuk mengosongkan terapung ialah "jelas". Atribut jelas menentukan bahagian mana elemen yang tidak membenarkan elemen terapung lain Apabila gaya "clear:both;" ditetapkan kepada elemen terapung, elemen terapung boleh dikosongkan supaya bahagian kiri atau kanan elemen itu tidak. dibiarkan terapung.

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

Dalam HTML5, atribut untuk clear floats ialah "clear".

Atribut jelas menentukan bahagian mana unsur yang tidak membenarkan elemen terapung lain

Mari kita lihat dengan lebih dekat pada atribut yang jelas.

Pertama sekali, anda mesti tahu bahawa div ialah elemen peringkat blok Ia menduduki baris eksklusif pada halaman dan disusun dari atas ke bawah, yang merupakan aliran legenda. Seperti yang ditunjukkan dalam gambar di bawah:

Dapat dilihat bahawa walaupun lebar div1 sangat kecil, satu baris dalam halaman boleh menampung div1 dan div2, dan div2 tidak akan disenaraikan di belakang div1, kerana Elemen div berada pada baris mereka sendiri.

Ambil perhatian bahawa teori di atas merujuk kepada div dalam aliran standard.

Xiaocai percaya bahawa tidak kira betapa rumitnya reka letak, titik permulaan asas ialah: "Cara untuk memaparkan berbilang elemen div dalam satu baris".

Jelas sekali bahawa aliran standard tidak lagi dapat memenuhi permintaan, jadi terapung diperlukan.

Terapung boleh difahami sebagai membiarkan elemen DIV tertentu daripada melepaskan diri daripada aliran piawai, terapung di atas aliran piawai dan aliran piawai bukan tahap.

Contohnya, dengan mengandaikan bahawa div2 dalam gambar di atas terapung, ia akan berpisah daripada aliran standard, tetapi div1, div3 dan div4 masih dalam aliran standard, jadi div3 akan bergerak ke atas secara automatik, menduduki kedudukan div2, dan bentuk semula aliran. Seperti yang ditunjukkan dalam gambar:

Seperti yang dapat dilihat daripada gambar, memandangkan div2 ditetapkan untuk terapung, ia tidak lagi tergolong dalam aliran standard, div3 secara automatik bergerak ke atas menggantikan kedudukan div2, div1, div3 dan div4 disusun mengikut urutan dan menjadi aliran baharu. Dan kerana terapung terapung di atas aliran standard, div2 menyekat sebahagian daripada div3, dan div3 kelihatan "pendek".

Di sini div2 menggunakan terapung kiri (float:left;), yang boleh difahami sebagai terapung dan disusun ke kiri (float:right;) sudah tentu disusun ke kanan. Kiri dan kanan di sini merujuk pada tepi kiri dan kanan halaman.

Jika kita mengapungkan div2 ke kanan, kesannya adalah seperti berikut:

Pada masa ini, div2 disusun pada tepi kanan halaman dan tidak lagi menyekat div3 Pembaca boleh melihat dengan jelas aliran yang terdiri daripada div1, div3 dan div4 yang disebutkan di atas.

Setakat ini kami hanya mengapungkan satu elemen div, bagaimana pula?

Seterusnya, kami menambah terapung kiri pada kedua-dua div2 dan div3 Kesannya adalah seperti berikut:

Begitu juga, kerana div2 dan div3 terapung, mereka tidak. lagi tergolong dalam aliran Standard, jadi div4 secara automatik akan bergerak ke atas dan membentuk aliran standard "baharu" dengan div1, dan terapung terapung pada aliran standard, jadi div2 menyekat div4 sekali lagi.

Ahem, mari kita ke intinya Apabila div2 dan div3 ditetapkan untuk terapung pada masa yang sama, div3 akan mengikuti div2 Saya tidak tahu sama ada pembaca perasan bahawa sehingga kini, div2 terapung di setiap contoh, tetapi ia tidak mengikut div1. Oleh itu, kita boleh membuat kesimpulan penting:

Jika elemen div A terapung, dan jika elemen sebelumnya unsur A juga terapung, maka elemen A akan mengikuti elemen sebelumnya. Jika kedua-dua elemen ini tidak boleh diletakkan dalam satu baris, elemen A akan diperah ke baris seterusnya); jika elemen sebelumnya bagi elemen A adalah elemen dalam aliran standard, maka kedudukan menegak relatif A tidak akan berubah, maksudnya, bahagian atas A Sentiasa sejajar dengan bahagian bawah elemen sebelumnya. Susunan

div ditentukan oleh susunan div dalam kod HTML.

Hujung yang dekat dengan tepi halaman ialah bahagian hadapan, dan hujung yang jauh dari tepi halaman ialah bahagian belakang.

Untuk membantu pembaca memahami, berikut ialah beberapa lagi contoh.

Jika kita menetapkan div2, div3 dan div4 untuk terapung ke kiri, kesannya adalah seperti berikut:

Berdasarkan kesimpulan di atas, ikuti Xiao Cai untuk memahaminya: mulakan dengan analisis div4, ia mendapati bahawa elemen atas div3 terapung, jadi div4 akan mengikuti div3 div3 mendapati bahawa elemen atas div2 juga terapung, jadi div3 akan Mengikuti div2; dan div2 mendapati bahawa elemen atas div1 ialah elemen dalam aliran standard, jadi kedudukan menegak relatif div2 kekal tidak berubah, dan bahagian atas masih sejajar dengan bahagian bawah elemen div1. Oleh kerana ia dibiarkan terapung, bahagian kiri adalah dekat dengan tepi halaman, jadi bahagian kiri adalah bahagian hadapan, jadi div2 berada di bahagian paling kiri.

Jika div2, div3 dan div4 semuanya ditetapkan untuk terapung ke kanan, kesannya adalah seperti berikut:

Prinsipnya pada asasnya sama dengan terapung kiri , tetapi anda perlu memberi perhatian kepada Koresponden sebelum dan selepas. Oleh kerana ia terapung ke kanan, bahagian kanan adalah dekat dengan tepi halaman, jadi bahagian kanan adalah bahagian depan, jadi div2 berada di hujung kanan.

Jika kita terapung div2 dan div4 ke kiri, rajah kesan adalah seperti berikut:

Ia masih berdasarkan kesimpulan bahawa div2 dan div4 terapung dan berpisah daripada aliran standard, jadi div3 secara automatik akan bergerak ke atas dan membentuk aliran standard dengan div1. div2 mendapati bahawa elemen sebelumnya div1 ialah elemen dalam aliran standard, jadi kedudukan menegak relatif div2 kekal tidak berubah dan diselaraskan dengan bahagian bawah div1. div4 mendapati bahawa elemen sebelumnya div3 ialah elemen dalam aliran standard, jadi bahagian atas div4 adalah sejajar dengan bahagian bawah div3, dan ini sentiasa benar, kerana seperti yang dapat dilihat dari gambar, selepas div3 bergerak ke atas, div4 juga bergerak ke atas, dan div4 sentiasa bergerak ke atas Ia adalah untuk memastikan bahagian atas dirinya sejajar dengan bahagian bawah elemen sebelumnya div3 (elemen dalam aliran standard).

Pada ketika ini, tahniah kepada pembaca yang telah menguasai penambahan float, tetapi terdapat juga clearing floats sangat mudah difahami berdasarkan asas di atas.

Selepas kajian di atas, dapat dilihat bahawa sebelum unsur-unsur terapung, iaitu dalam aliran piawai, ia disusun secara menegak, dan selepas terapung, ia boleh difahami sebagai disusun secara mendatar.

Membersihkan pelampung boleh difahami sebagai memecahkan susunan mendatar.

Kata kunci untuk membersihkan terapung adalah jelas. : Nilai lalai. Objek terapung dibenarkan di kedua-dua belah

kiri : Objek terapung tidak dibenarkan di sebelah kiri

kanan : Objek terapung tidak dibenarkan di sebelah kanan

clear : none | left | right | both

kedua-duanya : Objek terapung adalah tidak dibenarkan

Takrifannya sangat mudah difahami, tetapi pembaca mungkin mendapati bahawa ini tidak berlaku apabila menggunakannya dalam amalan.

Tak salah dengan takrifan itu, tetapi ia terlalu kabur dan membuatkan kita rugi.

Berdasarkan asas di atas, jika hanya terdapat dua elemen div1 dan div2 pada halaman, kedua-duanya terapung kiri Senarionya adalah seperti berikut:

Pada masa ini div1, Kedua-dua div2 terapung Mengikut peraturan, div2 akan mengikut div1, tetapi kami masih mahu div2 disusun di bawah div1, sama seperti div1 tidak terapung dan div2 dibiarkan terapung.

Pada masa ini, pelampung jelas (clear) digunakan Jika ia berdasarkan definisi rasmi, pembaca boleh cuba menulis seperti ini: tambahkan clear:right pada gaya CSS div1, yang bermaksud bahawa bahagian kanan div1 tidak dibenarkan Terdapat elemen terapung Memandangkan div2 ialah elemen terapung, ia akan bergerak ke bawah secara automatik untuk memenuhi peraturan.

Sebenarnya pemahaman ini tidak betul dan tidak memberi kesan. Mari kita lihat kesimpulannya:

Untuk CSS clear float (clear), anda mesti ingat: peraturan ini hanya boleh mempengaruhi elemen itu sendiri yang menggunakan clearance dan tidak boleh menjejaskan elemen lain.

Bagaimana anda memahaminya? Ambil contoh di atas, kami mahu div2 bergerak, tetapi kami menggunakan float jelas dalam gaya CSS elemen div1, cuba memaksa div2 untuk bergerak ke bawah dengan mengosongkan elemen terapung di sebelah kanan div1 (clear:right;) , ini tidak boleh dilaksanakan, kerana apungan jelas ini dipanggil dalam div1, ia hanya boleh menjejaskan div1, bukan div2.

Menurut kesimpulan Xiaocai, jika anda mahu div2 bergerak ke bawah, anda mesti menggunakan apungan dalam gaya CSS div2. Dalam contoh ini, terdapat elemen terapung div1 di sebelah kiri div2, jadi selagi anda menggunakan clear:left dalam gaya CSS div2 untuk menentukan bahawa elemen terapung tidak dibenarkan muncul di sebelah kiri div2; elemen, div2 akan dipaksa untuk bergerak ke bawah satu baris.

Jadi bagaimana jika terdapat hanya dua elemen div1 dan div2 pada halaman, dan kedua-duanya terapung kanan? Pembaca sepatutnya dapat meneka sendiri adegan itu pada masa ini, seperti berikut:

Jika anda mahu div2 beralih ke div1, apakah yang perlu anda lakukan?

Begitu juga berdasarkan kesimpulan Xiaocai, jika kita ingin memindahkan div2, kita mesti memanggil float dalam gaya CSS div2, kerana float hanya boleh menjejaskan elemen yang memanggilnya.

Dapat dilihat bahawa terdapat elemen terapung div1 di sebelah kanan div2, maka kita boleh menggunakan clear:right dalam gaya CSS div2 untuk menentukan bahawa elemen terapung tidak dibenarkan muncul pada sebelah kanan div2, supaya div2 terpaksa bergerak ke bawah Satu baris, disusun di bawah div1.

Pengesyoran berkaitan: "tutorial video html"

Atas ialah kandungan terperinci Apakah atribut yang membersihkan terapung dalam html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!