CSS Float Example(float and clear)

CSS float property is used to Move the elements to the left or right.This elements manily used for images and layouts.

CSS Float Properties

Property	Values
clear	left, right, both, none, inherit
float	left, right, none, inherit

CSS Float Property Values

Value	Description
none	It is a default value.
left	This is used to float the element to the left.
right	This is used to float the element to the right.
initial	It is sets to the property to its initial value.
inherit	This is used to inherit this property from its parent element.

Example1 - float: right;

This example specifies that an image should float to the right in a text:

CSS Tutorials CSS control the layout of color of the text, the style of fonts, the spacing between paragraphs,background images or colors are used and also multiple web pages at once.. CSS are Mainly work on how HTML elements are to be displayed on screen.

Example:-

img {
  float: right;
}

Test it Now

Example2 - float: left;

This example specifies that an image should float to the left in a text:

Example:-

img {
  float: left;
}

Test it Now

Clear Property

The clear property is used to what elements can float beside the cleared element and on which side.

Example:-

div {
  clear: left;
}

Test it Now

Web Layout Example

Use the float property for web layouts Website.

Example:-

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

Test it Now

Next TopicCSS Height or Width

← prev next →

CSS Tutorials

CSS Properties

CSS Float Example(float and clear)

CSS Float Properties

CSS Float Property Values

Example1 - float: right;

Example2 - float: left;

Clear Property

Navigation Menu

Web Layout Example