Hướng dẫn dùng w3schools float trong PHP

More "Try it Yourself" examples below.

---

Definition and Usage

The float property specifies whether an element should float to the left, right, or not at all.

Note: Absolutely positioned elements ignore the float property!

Note: Elements next to 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).

Show demo ❯

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

---

---

CSS Syntax

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

Property Values

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

---

More Examples

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:

.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

Do not allow floating elements on the left or the right side of a specified

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 »

---

Related Pages

CSS tutorial: CSS Float

HTML DOM reference: cssFloat property

---

The CSS float property specifies how an element should float.

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

---

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.

---

Example - float: right;

The following example specifies that an image should float to the right in a text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

---

---

Example - float: left;

The following example specifies that an image should float to the left in a text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

---

Example - No float

In the following example the image will be displayed just where it occurs in the text (float: none;):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

---

Example - Float Next To Each Other

Normally div elements will be displayed on top of each other. However, if we use float: left we can let elements float next to each other:

Example

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

Try it Yourself »