CSS float Property

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

CSS float Property

❮ Previous
Complete CSS Reference
Next ❯

Example

Let an image float to the right:

img

float: right;

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The float property specifies how an element should float.

Note: Absolutely positioned elements ignores the float property!

Note: Elements after a floating element will flow around it. To avoid this, use the
clear property or the clearfix hack (see example
at the bottom of this page).

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.cssFloat="left" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
float	1.0	4.0	1.0	1.0	7.0

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

CSS Syntax

float: none|left|right|initial|inherit;

Property Values

Value	Description	Play it
none	The element does not float, (will be displayed just where it occurs in the text). This is default	Play it »
left	The element floats to the left of its container	Play it »
right	The element floats the right of its container	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Let an image float to the left:

img

float: left;

Try it Yourself »

Example

Let image be displayed just where it occurs in the text (float: none):

img

float: none;

Try it Yourself »

Example

Let the first letter of a paragraph float to the left and style the letter:

span
    float: left;
    width:
0.7em;
    font-size: 400%;

font-family: algerian, courier;
    line-height: 80%;

Try it Yourself »

Example

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

.header, .footer
    background-color: grey;

color: white;
    padding: 15px;

.column
    float: left;

padding: 15px;

.clearfix::after
    content: "";

clear: both;
    display: table;

.menu width: 25%;
.content width: 75%;

Try it Yourself »

Example

Use float to create a homepage with a header, footer, left content and main content:

Try it Yourself »

Example

Do not allow floating elements on the left or the right side of a specified
<p> element:

img
float: left;

p.clear

clear: both;

Try it Yourself »

Example

If a floating element is taller than the containing element, it will overflow outside its container.
It is possible to fix this with the "clearfix hack":

.clearfix::after
    content: "";

clear: both;
    display: table;

Try it Yourself »

CSS tutorial: CSS Float

HTML DOM reference:
cssFloat property

❮ Previous
Complete CSS Reference
Next ❯

搜尋此網誌

wefcdr