float css – one of various CSS properties

float css – one of various CSS properties

2 24780

float css – one of various CSS properties

Today I will tell you about CSS. This is will property called ‘float’. This property already in CSS since first version. And of course supporting of all possible browsers – Firefox, IE, Safari, Opera etc.

By default, all basic HTML elements floating from left to right as possible. If the item reaches the end of the page (or the boundaries of its parent element), it goes lower – to next line.

Of course, we can play with these rules via float css attribute.


‘float’ property has the following possible values:

  • none – default value. Mean that no special float riles will applied. Without floating.
  • left – element will floats to left side.
  • right – element will floats to right side
  • inherit – element will take float value from its parent. This is rare using property, just because seems it not supported in IE.

Here are few samples of using float with css

Sample 1 – we will position several elements with float value = left. Sample code you will see below too

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
div{
float:left;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}
<div class='left'>Element 1</div>
<div class='left'>Element 2</div>
<div class='left'>Element 3</div>
<div class='left'>Element 4</div>
<div class='left'>Element 5</div>
<div class='left'>Element 6</div>
<div class='left'>Element 7</div>
<div class='left'>Element 8</div>
<div class='left'>Element 9</div>
<div class='left'>Element 10</div>

Sample 2 – lets change float to right

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

Interesting, isn`t it? all elements now floating to right, and if no room – drop to next line, again to right side.

Sample 3 – none value

Element 1
Element 2
Element 3
Element 4
div{
float:none;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}

Yes, note few next rules: all other elements which follow after floating element will flow around it, and all elements which was before floating element will not be changed.

Also, quite forget, during playing with that float css property, you will noticing that all following elements will affected with this property too. It will looks like this:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Another (parent) block here (number 2)

Not good, isn`t it? We expect that this block should appear after our first parent, but instead – its appear in wrong place and it mess layout.

Full its code was:

#sample1{width:560px;
border:1px dashed #888;
margin:5px;
padding:5px
}
#sample1 div.left{
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
float:left
}
<div id="sample1">
    <div class='left'>Element 1</div>
    <div class='left'>Element 2</div>
    <div class='left'>Element 3</div>
    <div class='left'>Element 4</div>
    <div class='left'>Element 5</div>
    <div class='left'>Element 6</div>
    <div class='left'>Element 7</div>
    <div class='left'>Element 8</div>
    <div class='left'>Element 9</div>
    <div class='left'>Element 10</div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>

So how we can fix this? – Easy, we will using ‘clear’ property. Here are fixed version:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Another (parent) block here (number 2)

And its sources here:

<div id="sample1">
    <div class='left'>Element 1</div>
    <div class='left'>Element 2</div>
    <div class='left'>Element 3</div>
    <div class='left'>Element 4</div>
    <div class='left'>Element 5</div>
    <div class='left'>Element 6</div>
    <div class='left'>Element 7</div>
    <div class='left'>Element 8</div>
    <div class='left'>Element 9</div>
    <div class='left'>Element 10</div>
    <div style="clear:both"></div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>

Conclusion

I hope that our new article was very useful for your projects. Good luck!

SIMILAR ARTICLES


2 COMMENTS

Leave a Reply to author Cancel reply