I welcome to another video I talked previously about Steve's that work as a visionary
container death defying the different sections off our webpage gifts are used to group
content,
so it can be easy to style using the class or I D.
Attributes that you have learned.
Don't forget that these are block elements that I could buy 100% off the page reads,
Having default behavior off,
being stack up one on top off the other.
Let's see now a very important property used to define your layouts.
The foot property that is responsible for positioning and control lee out on webpages.
This property let you put block elements side by side instead of on top off the other,
giving control over the horizontal position often HTML elements to better understand all
this property words.
Let's make an example using three D EFS,
other Neff and mine elements that I create in my coat.
First,
I simply defined style for my first Deve,
using 100 pixels value for right and the background color light green for my Never Deve
with 200 pixels of I and background Kohler Koro.
And finally,
for my main dif.
I define the ICT with the value off 500 pixels and background color.
Right?
You see in the browser that thieves are all displayed in vertical on the top of each other
and occupy all the patch with,
as expected now starting changing the coat if I simple used float property with value left
for the other.
And if I know with off 33% I changed the position off that dif to the left,
telling to the diva Nev that can flow around our instead off beginning underneath.
If I had now some text to these second dif,
you see that the text is floating around the other.
If the text does not feed student ive,
it happens overflow situation where a part of the deaths is outside the dif.
Another possible scenario is when I want to defense to be side by side without having any
element wrapping around the other.
For this case,
I have to add the float property to my second dif again with value left for disguise.
We see that the DIF remains below the other because this Steve is a block element that
occupies 100% off the weed by the fold.
I can Onley position on the right side of together if I define a with that is equal to or
less than the space left on the right side off the first dif like you see now in the image
where I define a with with the value off 33% other detail visible is that the grade ive is
now floating around the other two.
Deif's debts.
Every property float with value left.
If I want to position the second div on the right side,
I just need to change the float value from left to right and certainly you've still float
around the two first.
This what I want now is that less diff do not flow around the 1st 2 tiffs staying below.
That's the scenario where I used the clear property.
When this property receives the Value Boat,
there are no floating elements allowed on either the left or the right side.
So this dif moved down below the floated element.
The clear property can still have left and right values in which,
if we did not want elements to float on the left side.
We applied the value left,
and in case we do not want that to float on the right side.
We used the value rights.
That's the next situation.
Toe watch I f at this moment a diva on the left side and another on the right side.
If I apply the value clear left in my Sergeev,
I check that Stop floating around first if Onley getting around the second dif second
situation happens if I change value from left to right to see the d floating around left
beef.
I just need to change the ICT off first dif toe a value bigger than the second eve.
Okay,
you see now the three floating around first live and to finish I want three d is displayed
in the same line,
being very easy to apply.
I just need to wear the float to my last def with barely left and give a with off 33% to
all of them being arranged side by side.
That's all for now.
Thanks.