CSS Float And Clear | How To Float In Css, Clear Both

• CSS Tutorial
• CSS Selectors
• CSS Colors
• CSS Text Properties
• CSS Vertical Align
• CSS Font Properties
• CSS Display Property
• Box Sizing
• CSS Box Model
• CSS Overflow
• Multi-column Layout
• CSS Float and Clear
• CSS Float based Layout
• CSS Flexbox
• CSS Grids
• CSS navigation menu
• Div Based Layout
• Fixed Vs Liquid Layouts
• CSS Background Properties
• CSS List Style
• Pseudo Selectors
• CSS Before and After
• CSS Positions
• CSS Dropdown Menu
• CSS3 Tutorial
• CSS3 Selectors
• CSS Variables and Functions
• Border Radius
• Box Shadow
• Text Shadow
• CSS3 Opacity
• RGBA, HSL, HSLA Colors
• CSS3 Gradients
• CSS3 Backgrounds
• CSS3 Transition
• CSS3 Transform
• CSS3 Animation
• @font-face
• Clip Path
• CSS Object Fit
• CSS Filters
• Scroll Snap
• Responsive Web Design
• CSS 12 Grid layout

• ← Multi Column Layout
• Float based layout →

1. Home
2. Frontend
3. CSS
4. CSS Float and Clear

1. CSS Float
2. Float Left
3. Float Layout
4. Float Right
5. 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.

• ← Multi Column Layout
• Float based layout →