InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS float – floating left, right and clearing

on Feb 18, 2016

CSS float property decides if an element should float left or right. It can take two value – float:left or float:right. Elements after a floating element will also float around it. To clear float clear property can be used (clear:both, clear:left or clear:right).

Here are some examples.

Float left and right example with clear

This example has one left floating and one right floating div. One empty div with clear:both. Then it has one h2 which will not float.

<style type="text/css">
.left {
  float:left;
  width:50px; height:50px;
  background-color:lightgreen;
}
.right {
  float: right;
  width:50px; height:50px;
  background-color:lightgreen;
}
.clearboth {clear:both;}
</style>
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="clearboth"></div>
<h2>this is h1</h2>
refresh done
try it online

Float left and right example without clear

This example has one left floating and one right floating div. Then it has one h2 which will also float. In case we want it to not float, we need to apply clear:both on it or some other element before it.

<style type="text/css">
.left {
  float:left;
  width:50px; height:50px;
  background-color:lightgreen;
}
.right {
  float: right;
  width:50px; height:50px;
  background-color:lightgreen;
}
</style>
<div class="left">
left
</div>
<div class="right">
right
</div>
<h2>this is h1</h2>
refresh done
try it online

Suggested posts:

  1. CSS clearfix – clear float automatically using ::after
  2. Css position property – static, relative, absolute and fixed positioning
  3. CSS – align multiple divs horizontally
  4. CSS animation-name
  5. CSS border radius and round corners examples
  6. CSS – how to align image and text in center vertically
  7. CSS resize – make block element resizable by user
  8. CSS transition-property
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS layout, CSS properties, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2022 InfoHeap.

Powered by WordPress