მოდით, ყურადღება მივაქციოთ ათწილადის ნაკლოვანებებს. როგორ იქცევიან ერთმანეთთან ბლოკირებადი და შინაგანი ელემენტები და გამოიყენონ თუ არა ისინი ერთად. მოდით გავაანალიზოთ რა არის ზარალი და როგორ გავუმკლავდეთ მას.
მიუხედავად იმისა, რომ ბოლო სტატიაში ჩვენ ავაშენეთ მარტივი ქსელი საიტისთვის floats– ის გამოყენებით, ისინი თავდაპირველად გამიზნულია ტექსტში ელემენტების ნაკადის შესასწორებლად. Float- ს აქვს სამი მნიშვნელობა: მარცხნივ - ელემენტები ეკიდება მარცხენა ზღვარს; უფლება - ელემენტები დაჭერილია მარჯვენა კიდეზე; არცერთი - შეფუთვის რეჟიმი გამორთულია.
ათწილადით შეფუთული ელემენტის ზომა და შევსება შესაძლებელია, მაგრამ თუ ელემენტი შინაგანია, ის მოიქცევა ბლოკის ელემენტად.
.ბლოკი 1 {
ათწილადი: მარცხენა;
სიგანე: 150px;
}
.ბლოკი 2 {
ათწილადი: მარჯვნივ;
სიგანე: 150px;
}
Floats– ის გამოყენებისას კიდევ ერთი პრობლემაა, რომელიც ნაკადიდან ვარდება. როგორც ჩანს, როდესაც ბლოკები მიდიან ერთმანეთის მიყოლებით, მაგრამ მხოლოდ ერთ მათგანს აქვს float თვისება, მაშინ ის იქნება დანარჩენების თავზე, რადგან ის სხვა ბლოკებს ვერ ხედავს. შინაგანი ელემენტები შემოვა float ელემენტებზე, მაგრამ ამ ტექსტის შემცველი ბლოკი დარჩება float ელემენტის ქვეშ.
მაგრამ როგორ ურთიერთქმედებს float float- თან?
ისინი ტექსტად იქცევიან: ისინი ერთმანეთის მიყოლებით დგანან, სანამ თავისუფალი სივრცეა და შემდეგ გადადიან ახალ სტრიქონზე. ამიტომ, floats- ის დახმარებით, ჩვენ ბადეების მშენებლობა დავიწყეთ. თუ ადგილი აღარ დარჩა, მაშინ ისინი გადაადგილდებიან საიტის სიგანეზე, ანუ არსად მიდიან.
თუ float ვერ ხედავს ბლოკის მარტივ ელემენტებს, მაშინ ბლოკის ელემენტებს ასწავლიან float- ის დანახვას. ჩვენ ვიყენებთ მკაფიო თვისებას, რომელიც გათიშავს შეფუთვას ყველა მხრიდან (ან შერჩეულიდან). ანუ, წმინდა ელემენტი დაეცემა float ელემენტის ქვეშ.
