Float на HTML елементи
Oт всички CSS пропъртита за изграждане на Т layout можеби най-важното за усвояване е “флоутването” на елементи. То ни позволява да позиционираме елементи в лявата или дясната част на техния родител.Нека започнем с един прост пример.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="wrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div id="first-element"> I'm first element </div> <div id="second-element"> I'm second element </div> <div id="third-element"> I'm third element </div> </div> </body> </html> |
И съответно CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
body{ background:gray; } div{ margin-bottom: 1em; width: 100px; height: 100px; color:white; padding:5px; } #wrapper{ width:600px; height:600px; color:black; background:white; } #first-element{ background:red; } #second-element{ background:green; } #third-element{ background:blue; } |
Да зададем float на
1 |
<div id="first-element"></div> |
1 2 3 4 |
#first-element{ background:red; float:right; } |
Както виждаме дивът отстъпи от нормалната си позиция и се премести е дясно. Очакван сценарий . Но нека обърнем внимание на втория див забелязваме, че той също отстъпи от нормалното си положение и зае пространството което преди това заемаше първият див.
Другo не много очаквано поведение е ако “флоутнем” първия див в ляво.
bad thing happened
Изглежда, че вторият див магически изчезна. Но всъщнос не е така тъй като ние променихме нормалното състояние на първия див вторият просто е заел празното му пространство и фактически се намира под него.
Следва……