One of the most commonly used HyperText Markup Language (HTML) and cascading style sheets (CSS) tags for controlling the layout of a page is the float tag. When a CSS and HTML float tag is applied to an element, that part of the page floats either to the left or to the right. It also causes other elements, such as text, to flow around it.
The HTML float, which actually is a CSS tag applied to an HTML element, is a property that often is used by web designers to achieve a variety of different page layouts. When an HTML float property is applied to an element on a page, such as an image or part of the site structure, the element is removed from the normal “flow” of the page and floated either to the left or right. This allows the web designer greater control over where elements appear on a page.
One of the most common uses for the CSS and HTML float tag is to move an image to the left or right of the page. When an image is floated to the right, for example, it moves to the right side of the containing element. Text on the page also wraps around a floated image.
There are several properties of an HTML float tag that change the effect it has on an HTML element. Aside from floating to the left or right, for example, the web designer can specify the HTML float tag as “inherit”. This means the tag inherits the float property of its containing element. If, for example, an image is placed within a box that is floated to the left of a page, then the inherit tag also causes the image to be floated to the left.
A useful property that is often used in conjunction with a float tag is the clear tag. This controls how elements after a float tag are displayed. If, for example, an image is floated to the left but the text beneath it has a clear tag applied to it, then the text will always appear under the image rather than alongside it.
When the CSS and HTML float tag was first introduced, it wasn’t supported by all browsers. As of 2011, however, all major browsers support the float tag. This means a web designer can theoretically use the tag without worrying about whether it will cause a different appearance depending on the browser from which the user is viewing the website.