CSS Float

In CSS, Float is a positioning property. CSS Float property is used to flow an element to the left or right corner of parent container and the next element wrap around it. A floating element doesn't occupy space on normal flow. Thus we have to use clear both after last floating element to avoid wrapping.

By default, all html elements are non floating.

css float and clear

CSS Float values


Float None

..

In this example, both image and pargraph are non floating. As p tag is block level, p will starts from new line.

		
<img src="demo.png" alt=".." >
<p>In this example, both image and pargraph are non floating. As p tag is block level, p will starts from new line.</p>

Float Left

CSS Float Left push an element to the left corner of parent element, and other elements wrap around it. A floating element doesn't occupy space in flow. Thus next non floating element will wrap around floating element.

...

In this example, <img> tag is left floating and paragraph after image tag is non floating. So the parapragn is wrapping around img. The content inside paragraph is showing next to image, but paragraph is wrapping around image.



<style>
    img{ float:left}
    p{ background:yellow}
</style>
		
<img src="demo.png" alt="demo" >
<p>In this example, img tag is left floating and paragraph after image tag is non floating. So the parapragn is wrapping around img. The content inside paragraph is showing next to image, but paragraph is wrapping around image.</p>


Float left Example

  • List 1
  • List 2
  • List 3
  • List 4

<style>
    .list2 li{ float:left; list-style:none}
</style>

<ul class="list2">
    <li>List 1</l>
    <li>List 2</li>>
    <li>List 3</l>
    <li>List 4</li>
</ul>

Left Floating div

Div is the common element used to build layout. Div is block level and non floating. That means, the next div will always starts in new row.

If width of div is auto, div will occupy full width, but if width of div is in px or %, still new div starts from new row as div is block level.

Float None

Aside, non floating
Section, non floating

<style>
    *{ margin:0; }
    .wrap{ width:800px; border:1px solid}
    .aside1{ width:200px; height:200px; background:aqua}
    .section1{ width:600px; height:200px; background:pink}
</style>

<div class="wrap">
	<div class="aside1">Aside 1</div>
	<div class="section1">Section 1</div>
</div>

Float Left

Float Left is used on both division here. First aside is floated left, and then section div is also floated left. After both floating elements, a blank div clear is used to stop next element wraping around floating divs.

Aside, left floating
Section, left floating

<style>
*{ margin:0;}
.wrap{ width:800px; border:1px solid}
.aside2{ width:200px; height:200px; background:aqua; float:left}
.section2{ width:600px; height:200px; background:pink; float:left}
.clear{ clear:both}
</style>

<div class="wrap">
    <div class="aside2">Aside 2</div>
    <div class="section2">Section 2</div>
    <div class="clear"></div>
</div>

Float Right

Float Right pull an element to the top Right corner of parent element, and other elements wrap around it.

..

In this example, img tag is right floating and paragraph after image tag is non floating. So the parapragn is wrapping around img. The content inside paragraph is showing next to image, but paragraph is wrapping around image. Check the yellow background of p tag.


<style>
    img{ float:right}
    p{ background:yellow}
</style>

    <img src="demo.png" alt=".." >
    <p>In this example, img tag is right floating and paragraph after image tag is non floating. So the parapragn is wrapping around img. The content inside paragraph is showing next to image, but paragraph is wrapping around image. Check the yellow background of p tag.</p>

Right Floating div

Float right is used on both division here. First aside is floated right, and then section div is also floated right. After both floating elements, a blank div clear is used to stop next element wraping around floating divs.

Aside floating right
Section floating right

<style>
    *{ margin:0; }
    .wrap{width:800px;  border:1px solid}
    .aside1{
        width:200px; 
        height:200px; 
        background:aqua; 
        float:right
    }
    .section1{
        width:600px; 
        height:200px; 
        background:pink; 
        float:right;
        }
    .clear{ clear:both}
</style>

<div class="wrap">
    <div class="aside1">Aside floating right</div>
    <div class="section1">Section floating right</div>
    <div class="clear"></div>
</div>

CSS Clear

CSS Clear property is used to stop next element to wrap around the adjacent floating elements. Clear can have clear left, clear right or clear both values.

Values of clear property

  • None Default
  • Left Clear left floating only
  • Right Clear right floating only
  • Both Clear Both left & right floating

clear none example

Without clear:both, the paragraph after floating divs will wrap around. And the next division will also wrap around, but after paragraph.

Aside floating left
Section floating left

This Paragraph will wrap around Adjacent floating Divs


<style>		
    *{ margin:0}
    .wrap{ width:800px;  border:1px solid}
    .aside3{ width:200px; height:200px; background:aqua; float:left}
    .section3{ width:600px; height:200px; background:pink; float:left}
</style>

<div class="wrap">
	<div class="aside3">Aside floating left</div>
	<div class="section3">Section floating left</div>
	<p>This Paragraph will wrap around Adjacent floating Divisions.</p>>
</div>


Clear Both example

Clear: both after floating elements stop next element wrapping around.

Aside 4
Section 4

This Paragraph will not wrap around Adjacent floating Divs as the third div is cleared from both sides


<style>
    *{ margin:0 }
    .wrap{width:800px;  border:1px solid}
    .aside4{width:200px; height:200px; background:aqua; float:left}
    .section4{width:600px; height:200px; background:pink; float:left}
    .clear{ clear:both}
</style>
	
<div class="wrap">
    <div class="aside4">Aside 4</div>
    <div class="section4">Section 4</div>
    <div class="clear"></div>
    <p>This Paragraph will not wrap around Adjacent floating Divs as it is clear from both sides</p>>
</div>

Clear Both

CSS Clear Both Property does not allow any element to wrap around any adjacent Floating element in both Left and Right Directions. It is compulsory to use clear both after floating elements .