CSS Float and Clear | how to float in css, Clear Both

CSS Float
Float Left
Float Layout
Float Right
CSS Clear

CSS Float Property

CSS Float is a positioning property in css used to float an element to the left or right corner of parent element and the next element or text wrapping around the left or right to it . A floating element doesn't occupy space in 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 values

None Default value
Float Left
Float Right

CSS Float Example

Choose a option from radio buttons to check float property.

: Float None : Float Left : Float Right

This dummy text will wrap around the the floating image above to left or right. To now how float left, right and none works, please choose options above. This example will help you understand how CSS float left and right works. Float left will float image to left of parent and float right will float image to right of parent element. After float, next element, i.e. text in paragraph will wrap around image.

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 paragraph is wrapping around image. 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 paragraph is wrapping around the image. 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 { list-style:none}
    .list2 li{ float:left; }
</style>

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

CSS Float based Layout

CSS Float was mainly used to float images and wrap text around it. But CSS Float Property can also be used to build layouts using div tag. See example.

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.

Div with 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 wrapping around floating divisions.

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, image tag is right floating and paragraph after image tag is non floating. So the paragraph is wrapping around image. 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 paragraph is wrapping around image. 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 Property

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. Clear Left can stop wrapping around left floating element, Clear right can stop wrapping around right floating element. But Clear Both can stop wrapping around both left and right floating elements. It is compulsory to use clear both after floating elements.

Div tag is the preferred element to use clear both as div is block level.

Never use clear both on inline and inline-block elements. Prefer block level element for clear both.