RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/float below:

float · WebPlatform Docs

float Summary

Elements which have the style float are floated horizontally. These elements can move as far to the left or right of the containing element. All elements after the floating element will flow around it, but elements before the floating element are not impacted. If several floating elements are placed after each other, they will float next to each other as long as there is room.

Overview table

Initial value: none
Applies to: all elements except absolutely positioned, replaced elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No

CSS Object Model Property
:

Syntax

float: footnote
float: left
float: none
float: right

Values

none: none indicates that the element does not contain any float at all. This is the initial value of the float property.
left: The left value indicates that the element must float to the far left side of its containing block.
right: The right value indicates that the element must float to the far right side of its containing block.
footnote: The footnote value indicates that the element is moved to the footnote area and that a footnote call is put in its original location.

Examples

In this example, we create a simple layout containing a title, a logo (image) and some textual content. Notice the use of the clearfix class on the article element below.

<article class="clearfix">
  <img class="logo" src="/logo/wplogo_pillow_tan.png" alt="Web Platform Docs logo" />
  <h1>Web Platform Docs</h1>
  <p class="desc">Web Platform Docs is a community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Learn more about <a href="/docs/">Web Platform Docs</a>. To understand the <a href="/docs/css/properties/float"><code>float</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats"><code>clear</code></a> property.</p>
  </div>
</article>

View live example

The CSS for the above layout is described below. Notice the use of the floats.



.logo {
  float: left;
}

.desc {
  float: left;
  width: 60%;
}

View live example

Usage

 As float implicitly implies the use of the block layout, it modifies the computed value of the display values in some cases:

Specified value Computed value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block flex flex, but float has no effect on such elements inline-flex inline-flex, but float has no effect on such elements other unchanged

Note: If you’re referring to this property from JavaScript as a member of the element.style object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that “float” is a reserved word in JavaScript, as with the need to escape “class” as “className” and escape <label>’s “for” as “htmlFor”).

Notes Remarks

When using floats it’s often necessary to clear the parent element. Check out the clear-property.
Objects following a floating object move in relation to the position of the floating object.
The floating object is moved left or right until it reaches the border, padding, or margin of another block-level object.

Syntax

float: left | right | none | inherit

Standards information

CSS 2.1, Section 5.5.25

Related specifications

CSS basic box model: Working Draft
CSS Level 2 (Revision 1): Recommendation
CSS Level 1: Recommendation
CSS Generated Content for Paged Media Module: Working Draft