CSS Float: penerangan, hartanah

Terapung - salah satu fungsi asas bahasa CSS (Cascading sedang Helaian Gaya - pemformatan melata). Bahasa ini telah wujud sejak tahun 1996 dan masih terus berkembang. Pada masa ini, pemaju telah menggunakan versi ketiga CSS. Dengan CSS bahasa pengaturcaraan ia adalah mungkin untuk membuat laman web yang indah dan menyenangkan yang tidak akan kelihatan ketinggalan zaman atau tidak selesa untuk pengguna, walaupun anda tidak menggunakan JavaScript. kemungkinan moden versi ketiga permit.

Juga, pemaju boleh menggunakan pilihan lebih mudah pemformatan seperti flexbox atau Jawatan untuk menukar unsur ruang pada laman web, tetapi perkara pertama yang pertama. Untuk mula memahami kelebihan dan keburukan Float hartanah.

CSS Float - mengapa ia diperlukan?

Terapung - hartanah untuk unsur-unsur kedudukan. Setiap hari, ia boleh dilihat pada halaman akhbar dan majalah, melihat gambar-gambar dan teks, yang sangat kemas membungkus mereka di sekitar. и CSS при использовании функции Float должно произойти то же самое. Dalam dunia HTML dan kod CSS dengan menggunakan fungsi Float sepatutnya berlaku yang sama. Tetapi ia adalah bernilai mengingati bahawa penyuntingan imej yang tidak selalunya tujuan utama fungsi ini. Ia boleh digunakan untuk mewujudkan lokasi popular di elemen tapak dalam dua, tiga, empat tiang. Malah, harta Float CSS digunakan untuk hampir mana-mana html-unsur. Mengetahui asas-asas mengedit unsur-unsur susun atur menggunakan fungsi Float, dan kemudian Harta, untuk membuat apa-apa reka bentuk laman web ini tidak akan menjadi sukar.

program DTP khas kadang-kadang boleh mengabaikan imej, dan untuk pergi ke atas mereka. perkara yang cukup sama berlaku dan reka bentuk web, dengan hanya cahaya teks, bukannya pendakian pada gambar dipaparkan (jika digunakan dengan betul Float sifat) bersebelahan atau di bawahnya, tetapi tidak semestinya di mana anda perlu pemaju.

CSS penerangan Float harta

Malah, keupayaan untuk menggunakan harta Float adalah ace sangat baik dalam lubang untuk mana-mana pereka web. Tetapi, malangnya, kekurangan pemahaman tentang bagaimana kerja-kerja ini boleh membawa kepada perlanggaran dan elemen-elemen lain laman kesedihan seperti ini. Sebelum ini juga situasi sedemikian berlaku kerana pepijat dalam pelayar. Kini rahsia bagaimana untuk betul menggunakan harta Float akan dibuka, dan tidak ada masalah dengan itu tidak seharusnya lebih besar.

Kami Float harta mempunyai empat nilai:

• Terapung: mewarisi;
• Terapung: right;
• Terapung: kiri;
• Terapung: none;

Bagi mereka yang tahu bahasa Inggeris, nilai parameter Float harta mestilah jelas. Tetapi bagi mereka yang tidak tahu, anda boleh membawa penjelasan sedikit. Parameter: kiri; Ia bergerak badan elemen di sudut kiri yang paling melampau unsur induk. Perkara yang sama berlaku (hanya dengan cara yang lain) apabila parameter bcgjkmpjdfybb: right; . Value: mewarisi; memerintahkan unsur untuk menganggap konfigurasi sama dengan ibu bapa. unsur-unsur seperti menamakan anak masih, kerana mereka berada secara langsung dalam kod html masuk dengan ibubapa. harta A: none; Ia membolehkan elemen untuk tidak mengganggu aliran biasa dokumen itu, yang ditetapkan secara lalai untuk semua bahagian kod.

Bagaimana untuk Float kerja?

harta apungan CSS berfungsi dengan agak mudah. Semua yang telah diterangkan di atas, boleh dilakukan tanpa banyak kesulitan. Selepas itu, segala-galanya akan menjadi seperti mudah. Tetapi sebelum saya terus belajar sifat Float, bernilai melihat sedikit ke dalam teori. Setiap laman web adalah elemen blok. Ia adalah mudah untuk melihat ini dengan membuka konsol dalam Google Chrome dengan menekan Ctrl + Shift + teks J., tajuk, imej, pautan, dan lain-lain komponen laman web ini akan blok, hanya saiz yang berbeza dipaparkan. Pada mulanya, semua blok ini mengikuti satu sama lain. Seperti yang ditunjukkan dalam contoh di bawah, tali kod pergi satu demi satu, dan mereka kelihatan tegas satu di belakang yang lain.

Ini dipanggil aliran biasa (aliran normal). Apabila semua blok itu termasuk dalam satu sama lain (badan tanpa menyeberangi unsur) menegak. Pada mulanya, semua kandungan laman web yang terletak dengan cara ini. Walau bagaimanapun, apabila menggunakan, sebagai contoh, sifat-sifat CSS Float unsur bahasa Kiri meninggalkan kedudukan semula jadi pada halaman dan bergerak ke kiri. tingkah laku ini membawa kepada perlanggaran yang tidak dapat dielakkan dengan unsur-unsur yang kekal dalam perjalanan biasa.

Dalam erti kata lain, unsur-unsur sebaliknya kedudukan menegak, kini bersebelahan dengan satu sama lain. Jika elemen induk adalah ruang yang cukup supaya ia boleh menampung dua kanak-kanak di dalam, perlanggaran itu tidak berlaku, tetapi jika tidak, pengenaan satu objek yang lain tidak dapat dielakkan. Ia adalah sangat penting untuk ingat untuk memahami sifat-sifat Float CSS.

fungsi yang jelas untuk menyelesaikan masalah

Kami Float mempunyai hati setiap - Clear. Bersama-sama mereka - tidak menumpahkan air. Kedua-dua ciri-ciri ini melengkapi antara satu sama lain dan membuat pemaju gembira. Seperti yang dinyatakan di atas, sel-sel jiran keluar sudah tentu biasa mereka dan juga mula "apungan" sebagai elemen yang kepadanya harta Float itu digunakan (contohnya, CSS Float Top). Akibatnya, bukannya unsur terapung mendapat dua, dan tidak di tempat di mana mereka bertujuan untuk menguruskan pemaju. Dari saat itu hanya permulaan semua masalah.

Di Clear fungsi mempunyai lima nilai:

• : Kiri;
• : Hak;
• : Kedua;
• : Mewarisi;
• none;

Sebagai perbandingan kita boleh memahami apabila ia adalah yang terbaik untuk menggunakan fungsi yang jelas. Jika kita telah menulis garis di Float kod: right; (CSS-kod yang dimaksudkan), fungsi mestilah jelas: hak ;. Sifat yang sama batu dan Float: kiri; ia akan melengkapkan Clear: kiri; . Semasa menulis kod yang jelas: kedua-duanya; ternyata bahawa elemen di mana ia digunakan, ciri-ciri ini akan berada di bawah elemen-elemen yang digunakan fungsi Float. Mewarisi mengambil tetapan dari unsur induk, tetapi tidak seorang pun tidak membuat apa-apa perubahan kepada struktur laman web ini. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Jika anda memahami bagaimana Float dan fungsi yang jelas, anda boleh menulis HTML yang unik dan luar biasa dan CSS Float-kod, yang akan membuat laman web anda unik di seumpamanya.

Menggunakan Float untuk mencipta ruangan

Terapung ciri berguna semasa membuat lajur pada laman web ini (atau lokasi kandungan CSS Float di bahagian tengah halaman web). Ia adalah kod ini adalah yang paling praktikal dan mudah, jadi anda harus mempertimbangkan beberapa pilihan untuk membuat template laman web biasa yang terdiri daripada dua tiang. Sebagai contoh, mengambil sebuah laman web standard dengan kandungan pada bar navigasi kiri (bar navigasi) di sebelah kanan, header dan footer. kod kelihatan seperti ini:

Sekarang kita perlu memahami apa yang ditulis di sini. Elemen ibubapa di mana bahagian utama html-kod dipanggil bekas (bekas). Ia membolehkan anda untuk mengelakkan unsur-unsur, yang digunakan fungsi Float berselerak dalam arah yang berbeza. Jika ia tidak, maka unsur-unsur ini telah diapungkan sehingga sempadan pelayar.

Kemudian, dalam kod dan pergi #navigation #content. Unsur-unsur ini digunakan fungsi Float. #content dihantar ke kiri dan ke kanan adalah #navigation. Ia adalah perlu untuk mewujudkan sebuah laman web dengan dua tiang. Pastikan untuk menentukan lebar, supaya benda-benda yang tidak bertindih antara satu sama lain. Anda boleh menentukan lebar dan peratusan. Jadi, walaupun lebih selesa daripada dalam piksel. Sebagai contoh, 45% kepada 45% dan #content untuk #navigation, dan baki 10% untuk memberi margin harta.

Harta yang jelas, yang berada dalam #footer, tidak mengikuti #navigation footer dan #content, tetapi meninggalkan ia ke tempat yang sama di mana dia. Apa yang boleh berlaku? Jika anda tidak nyatakan harta yang jelas? Kod #footer ini hanya pergi dan akan berada di bawah #navigation. Ini berlaku disebabkan oleh hakikat bahawa #navigation ruang yang cukup untuk menampung lebih daripada satu unsur. Dalam contoh ilustrasi ini, ia dapat dilihat dengan jelas bagaimana sifat-sifat yang jelas Float dan melengkapi antara satu sama lain.

Masalah yang mungkin anda hadapi semasa menulis kod

Contoh di atas adalah mudah. Tetapi dengan mereka boleh menyebabkan masalah. Secara umumnya, sebenarnya, banyak masalah yang tidak dijangka boleh berlaku kepada Float fungsi. Tidak kira bagaimana aneh, tetapi masalah biasanya tidak berlaku dengan CSS, dan html-kod. Lokasi di mana elemen dengan fungsi Float dalam html-kod secara langsung memberi kesan kepada kerja-kerja akhir. Untuk mengelakkan pelbagai jenis kesukaran, ia adalah yang terbaik untuk berpegang kepada peraturan yang mudah - elemen kedudukan Float fungsi kod yang pertama. Hampir selalu ia berfungsi dan mengurangkan tingkah laku yang tidak dijangka mereka.

pertembungan unsur-unsur

Perlanggaran berlaku apabila unsur induk mengandungi berbilang kanak-kanak tidak dapat menampung mereka semua, dan mereka bertindih antara satu sama lain. Ia juga berlaku bahawa item mungkin tidak muncul, dan hilang dari laman web ini. Ini bukan satu pelayar bug, dan ia dijangka dan tingkah laku yang betul unsur-unsur dengan fungsi Float.

Kerana kenyataan bahawa unsur-unsur ini adalah pada mulanya dalam perjalanan biasa, dan kemudian ia rosak pelayar Float hotel boleh mengeluarkan mereka dari laman web ini. Tetapi tidak berputus asa, kerana penyelesaian adalah mudah dan jelas - menggunakan harta Cear. Ia adalah mungkin bahawa semua jalan keluar dari masalah ini, penggunaan yang jelas adalah yang paling berkesan.

Tetapi masalah perlanggaran elemen halaman web boleh diselesaikan dengan cara lain. Terdapat sekurang-kurangnya dua cara:

• Meletakkan penggunaan fungsi;
• permohonan flexbox.

fungsi kedudukan sering alternatif yang baik untuk CSS Float. Di tengah-tengah halaman web dalam hal Jawatan permohonan adalah yang terbaik untuk meletakkan imej. Jika nilai-nilai digunakan dengan betul: mutlak dan: relatif, elemen jatuh ke dalam tempat, dan tidak akan bertindih antara satu sama lain.

Analisis kedudukan dan Float kod fungsi

и CSS Float заменить на Position. Ia harus berurusan lagi dengan cara dalam HTML dan CSS Float digantikan oleh Jawatan. Sebenarnya ia adalah sangat mudah. Katakan terdapat #container elemen dan #div.

#container {

lebar: 40%;

terapung: kiri;

margin: 10px;

}

#div {

lebar: 40%;

terapung: right;

margin: 10px;

}

#footer {

jelas: kedua-duanya;

}

Dalam contoh ini, penggunaan fungsi dalam kontena kedua (CSS Div) Float akan membantu untuk membuat laman taraf dua tiang. Jangan sekali-kali lupa fungsi Clear. Tanpa ia hanya akan menindih elemen di atas satu sama lain.

Jadi bagaimana anda menukar CSS dan Float kod untuk digunakan postion? Sangat mudah:

#container {

lebar: 40%;

kedudukan: relatif;

margin: 10px;

}

#div {

lebar: 40%;

kedudukan: relatif;

margin: 10px;

}

Dalam kes ini #container #div dan mengambil kedudukan yang diperlukan pemaju dalam elemen induk. Perkara utama? meletakkan #div dan #container satu elemen induk, yang akan sesuai dengan saiz mereka.

Flexbox - fungsi ini akan menggantikan CSS Float?

Flexbox - cara yang paling maju untuk membina laman web pada masa ini, jadi fungsi ini tidak disokong oleh versi yang lebih lama pelayar. Ini sebenarnya tidak diabaikan, untuk pengguna dengan versi pelayar tidak akan dapat melihat versi yang betul laman web ini.

Flexbox bukan harta, kerana modul yang berasingan. Oleh itu flexbox menyokong beberapa ciri-ciri, yang bekerja hanya dengan dia. Selain itu, fungsi paparan, yang mempunyai tiga parameter sebaris, blok dan sebaris-blok dalam flexbox hanya ada satu flex-aliran.

Bagaimana flexbox?

Teknologi ini membantu pemaju untuk dengan mudah menyelaraskan unsur-unsur mendatar dan menegak. Flexbox juga boleh mengubah arah dan perintah elemen paparan. Dalam teknologi ini, terdapat dua paksi: paksi utama paksi dan Cross, sekitar yang seluruh flexbox yang dibina. Ia juga mengeluarkan Float kesan dan fungsi yang jelas. Beliau membina sistem dalam kod, yang menggunakan yang unik ke tanah miliknya, jadi, malangnya, tidak dapat meniru dalam sel-sifat lain, seperti Float dan Kedudukan. Dan ia akan menjadi sangat berguna, kerana, seperti yang dinyatakan di atas, flexbox hanya berfungsi dalam versi baru pelayar.

Perlu diingati bahawa dalam Jawatan akhirnya, flexbox Float dan melakukan perkara yang sama - mewujudkan reka bentuk luar biasa dan asal laman web anda. Setiap versi yang dibincangkan dalam artikel melakukannya dengan cara sendiri dan oleh itu, mempunyai kedua-dua kebaikan dan keburukan. Di samping itu, ia berlaku bahawa fungsi Float di suatu tempat yang sesuai (sebagai contoh, di laman web ini dengan struktur yang mudah), tetapi di suatu tempat yang lebih baik untuk menggunakan kedudukan atau flexbox.

Double Margin Bug

Walau bagaimanapun, kadang-kadang, malangnya, setiap masalah pemaju tidak timbul dari hurufiah, dengan pepijat dan dalam beberapa bentuk pelayar tertentu. Sebagai contoh, dalam Internet Explorer, terdapat bug, yang dipanggil Margin Bug Double. Dia menggandakan Margin parameter kepada dua, menyebabkan anjakan elemen tapak sempadan pelayar. Untuk mengelakkan ini, ia adalah mencukupi untuk menunjukkan Peratus parameter Margin. Biasanya bug ini berlaku apabila nilai mata Margin Float y dan hartanah.

#div {

terapung: kiri;

margin-left: 10px;

}

Kod ini akan beralih unsur dalam Internet Explorer 20 px kiri. Anda boleh mengubah suai kod seperti berikut:

#div {

terapung: kiri;

margin-left: 10%;

}

atau lebih

#div {

terapung: kiri;

margin-right: 10px;

}

Kedua-dua pilihan ini akan menyelesaikan masalah unsur-unsur anjakan.

pelayar Bugs dan tapak paparan tidak betul

Ia adalah bernilai untuk ingat bahawa Internet Explorer - bukan satu-satunya pelayar yang boleh berlaku bug. versi yang lebih lama Google Chrome dan Mozilla juga salah memaparkan beberapa unsur-unsur laman web moden. Bagi setiap perbaikan ini, anda boleh mencari penyelesaian. Secara umum, kita perhatikan bahawa penggunaan Float akan mewujudkan reka bentuk laman web asal dan menarik. Memahami asas-asas dan prinsip-prinsip harta ini akan membantu mengelakkan kesilapan dan menjadikan kehidupan lebih mudah untuk mana-mana pemaju.