Float на HTML елементи

admin — Mon, 18 Feb 2013 14:46:48 +0000

Oт всички CSS пропъртита за изграждане на Т layout можеби най-важното за усвояване е “флоутването” на елементи. То ни позволява да позиционираме елементи в лявата или дясната част на техния родител.Нека започнем с един прост пример.
HTML




	
	Title


	
	
		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.
	
		
			I'm first element
		
		
			I'm second element
		
		
			I'm third element

И съответно CSS

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 на

#first-element{
  background:red;
  float:right;
}

Както виждаме дивът отстъпи от нормалната си позиция и се премести е дясно. Очакван сценарий . Но нека обърнем внимание на втория див забелязваме, че той също отстъпи от нормалното си положение и зае пространството което преди това заемаше първият див.
Другo не много очаквано поведение е ако “флоутнем” първия див в ляво.

bad thing happened

Изглежда, че вторият див магически изчезна. Но всъщнос не е така тъй като ние променихме нормалното състояние на първия див вторият просто е заел празното му пространство и фактически се намира под него.
Следва……

MyBlog

Float на HTML елементи