The Float Property in CSS

0
174
CSS
Float Property in CSS

In defining the structure of a web page, elements that, properly managed, are the variables that will allow us to give a professional image to our site are used. The tables were one of the means used for web layout in rectangular sectors, which allowed to place the objects in a more or less controlled order.

However, the use of tables within HTML was replaced, from the creation of a CSS property that allows more flexibility and precision: the float property.

Since then, tables are used only for their basic function: the tabulation of figures or data.

Once the characteristics of the float property in CSS are known, the layout of a website and its subsequent updates are performed with greater elasticity and efficiency.

The Float Function

The float property allows the distribution in columns of the block elements of the page. We call block elements all those that generate a rectangular area on the site they occupy by breaking the normal flow of the text, such as div, p, ul.

The float property in CSS allows you to move a block element to the left or right. This produces a change in normal progression, whereby the elements are placed according to their sequential order on the page. One of the characteristics of the float property is that objects that do not configure blocks, such as text, surround the “floating” object. This is particularly visible on pages that contain illustrations in the middle of a text paragraph, as a magazine.

The format of the float function is like this:

.right {float: right;} or .left {float: left;}

Where the possible parameters are right, left, none or inherit.

right: the element is pushed (“floats”) to the right.

left: the item moves to the left.

none: the object will follow the normal sequence of the page.

inherit: the float property of this element depends on a parent object (a higher-level element that contains it).

Float’s relationship with the Elements

The float property only applies to elements that form blocks or modules. These are images, paragraphs, divisions, and lists. That is the objects that determine a rectangular area on the page. You can also apply the float property to a line element (a, span), which has been given display: block, which changes its value online to block.

Within the HTML coding they are identified as follows:

Images: <img src = …… [file location and parameters] ……………… ..>

Paragraphs: <p>… .. [text]… .. </p>

Divisions: <div>… .. [parameters]… .. </div>

Lists: <ul>… .. [elements of the list]… .. </ul>

Elements that do not form blocks, such as text, for example, surround the floating object over the space opposite it. That is, if the object has the property float: left, the text will surround it occupying as much space as possible on the right, without invading its position. As for other block objects, they will be located ignoring the position of the floating element.

Objects with the float property must also be defined with the width property to ensure column dimensions and avoid location and space conflicts. One of the properties that is used in conjunction with float to improve the organization of the elements, is clear. Clear is applied to an object to prevent floating elements from being placed on its sides. Clear parameters are left (does not allow objects on its left), right (does not allow them on the right) and both (prevents floating elements on both sides).

Practical Float Applications

The function of this property is more or less clear, in terms of fixing a block on one of the sides and allowing the flow of other information around it. With practice, very creative effects can be achieved through the use of float, clear, the definition of column widths and the intervention of other elements, floating or not. In particular, the cases outlined below reflect some of those practical uses.

Horizontal menu: by incorporating several rectangles (images) sequentially and with float: left property, within a messy list, <ul>, we achieve their horizontal location online. The first rectangle will be located on the left margin, the second on the first object, and so on until all the rectangles are completed. These images can have a legend and be linked to the corresponding pages, which configures a horizontal menu.

Product catalog: as in the previous case, the inclusion of product photographs with their descriptions within a messy list, allows their horizontal display on one or several lines if the float property is used for each object. It is a more efficient method than the use of tables since the simple replacement of one of the images would reorganize the rest without the need for any additional tasks.

I would like you to leave me a comment on this article and tell me if you have any questions and HTML/CSS JOb Support. I will personally respond to them.

 

About The Author

I am the Marketing Manager at SSJobSupport. We help for all US, UK, Canada and Australian employees and students who are looking to solve Technical challenges and Job Support to successfully complete the assigned projects and task on given timelines.