Providing Solutions For Web Development Languages and Platforms

CSS float and clear Empowering The Web Page Layout

CSS Layout with float and clear

CSS Float (float) property can be used to define the positioning of an element on the web page.

In other words, you can say that HTML float (float) is a positioning property. It is a kind of box that shifts left or right depending on the value given to the css float property. This positions the elements along with it.

float: left;float: right;

How to Use Float in CSS?


  • Use Float to set the entire layout of the web page.
  • Use Float to wrap text around images.

Valid values for CSS Float property


Possible Values Description Syntax
left Element get floated to left of its container. float: left;
right Element get floated to right of its container. float: right;
none Element will not float in any direction.
It will follow the normal flow of the document. This is the default value.
float: none;
inherit Element will inherit the float property from its parent.
It will floats in the direction its parent is.
float: inherit;
initial Element’s float property will be set to the initial value. float: initial;

CSS Layout Examples showing use of CSS Float


CSS Float Left – float: left;

Example shown below has the image which is set to CSS float property – float: left;. This makes the html float left.

HTML Float Image LeftLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS Float Right – float: right;

Example shown below has the image set to CSS float property – float: right;. This makes the html float right

HTML Float Image RightLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS Float None – float: none;

Example shown below has the image set to CSS float property – float: none;. So, its not floating. But, moving with the normal flow and also disturbing that flow as you can see below.

HTML FLoat Image NoneLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Overlap Issue with CSS float


Overlap Issue With CSS Float

#img1 { float: left; }#img2 { float: right; }

As you can see above, shown the html float image. In this, two elements are floating, one is to left and another is to right. But these elements are overlapping over an element after them which is not an html floating div. This can only have one solution to make after element continue to float properly or to go with normal flow that CSS clear property can perfectly do.

CSS clear Property


The css clear helps to solve the overlap issue shown above. HTML clear can make the element to continue to float on either side or can completely have the html float clear to make the element to get its own space properly without floating. Shown below the solution to above issue by the use of html clear.

Overlap Issue of CSS Float solved with CSS clear

#img1 { float: left; }#img2 { float: right; }

p { clear: both; }

Valid values for CSS Clear property


Possible Values Description Syntax
left CSS clear left restricts the element to float left. clear: left;
right CSS clear right restricts the element to float right. clear: right;
none Do not restricts the element to float. Can float on either left or right side. clear: none;
both CSS clear both restricts the element to float to both sides either its left or right side clear: both;
inherit Element will inherit the clear property from its parent. clear: inherit;

Out of the box Issue with CSS float


Out of the Box Issue With CSS Float

If a container contains such elements in which one floats to either side and other go with the normal flow and floated element is much bigger than the container. Them this comes out of the container disturbing the CSS layout.

Tricky clearfix


Out of the box issue(overflow) can be solved by the css clearfix trick which makes the floated element to come in the box (container).

Simply, You just need to add overflow: auto; to the container or box. This will take the CSS Layout to perfection.

Out of the box Issue Solved With CSS clearfix

overflow: auto; works well and will only when you are good to handle margins and paddings. To overcome these hassles try the html clearfix in a more effective way.


.clearfix {
    overflow: auto;
}


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

Leave a Reply

%d bloggers like this: