CSS Float || Bcis Notes

CSS Float

The CSS float property specifies how an element should float.

The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

  • left – The element floats to the left of its container
  • right – The element floats to the right of its container
  • none – The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit – The element inherits the float value of its parent
  • In its simplest use, the float property can be used to wrap text around images.

For example:-

– float: right;

CODE:

 

Result:

 – float: left;

CODE:

 

Result:

 

  – No float

CODE:

 

Result:

 

The clear Property
The clear property specifies what elements can float beside the cleared element and on which side.

The clear property can have one of the following values:

  • none – Allows floating elements on both sides. This is default
  • left – No floating elements allowed on the left side
  • right- No floating elements allowed on the right side
  • both – No floating elements allowed on either the left or the right side
  • inherit – The element inherits the clear value of its parent

 

CODE:

 

Result:

 

The clearfix Hack
If an element is taller than the element containing it, and it is floated, it will “overflow” outside of its container:

CODE:

 

Result:

 

 

      What is box-sizing?

–> You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box’s total width (and height), making sure that the padding stays inside of the box and that it does not break.

 

Grid of Boxes / Equal Width Boxes

With the float property, it is easy to float boxes of content side by side:

CODE:

 

Result:

     

 

NOTE:-   we also use the clearfix hack to take care of the layout flow, and that adds the box-sizing property to make sure that the box doesn’t break due to extra padding. Try to remove this code to see the effect

 

Images Side By Side

The grid of boxes can also be used to display images side by side:

CODE:

 

Result:

 

Equal Height Boxes
In the previous example, you learned how to float boxes side by side with an equal width. However, it is not easy to create floating boxes with equal heights. A quick fix, however, is to set a fixed height,

CODE:

 

Result:

 

ALSO, Using Flexbox we can create flexible boxes:

CODE:

 

Result:

 

Navigation Menu
Use float with a list of hyperlinks to create a horizontal menu:

CODE:

 

Result:

Web Layout Example
It is also common to do entire web layouts using the float property:

CODE:

 

Result:

 

 

All CSS Float Properties

 

 

You may also like : CSS Overflow

 

Leave a Reply

Your email address will not be published. Required fields are marked *