CSS Float (floating)
CSS Float (floating) will move the element to the left or right, and the surrounding elements will also be arranged again.
Float is often used for images, but it is also very useful when layout.
How to float
The horizontal direction of the
element is floating, which means that the element can only move left and right without moving up and down.
A floating element will move to the left or right as much as possible until its outer edge encounters a frame containing a box or another floating frame.
The element after
floating element will surround it.
The elements of
before the floating element will not be affected.
If the image floats right, the text flow below will be surrounded by it:
<! Doctype html>
<html>
<head>
<Title> Test </Title>
<Style>
IMG
{{
Float: Right;
}
</style>
</head>
<body>
<p> In the following paragraph, we added a picture of <b> Float: Right </b>. The picture will float on the right side of the paragraph. </p>
<p>
<img src = "83.gif" width = "95" height = "84" />
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
This is some texts. This is some texts. This is some texts.
</p>
</body>
</html>each other’s adjacent floating elements
If you put a few floating elements together, if there is space, they will be adjacent to each other.
Here, we use the float attribute to the picture gallery:
<! Doctype html>
<html>
<head>
<Title> Test </Title>
<Style>
.gif
{{
Float: left;
width: 110px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<h3> Picture Library </h3>
<p> Try to adjust the window to see what happens when the picture does not have enough space. </p>
<img class = "gif" src = "83.gif" width = "107" height = "90">
<img class = "gif" src = "83.gif" width = "107" height = "80">
<img class = "gif" src = "83.gif" width = "116" height = "90">
<img class = "gif" src = "83.gif" width = "120" height = "90">
<img class = "gif" src = "83.gif" width = "107" height = "90">
<img class = "gif" src = "83.gif" width = "107" height = "80">
<img class = "gif" src = "83.gif" width = "116" height = "90">
<img class = "gif" src = "83.gif" width = "120" height = "90">
</body>
</html>Clear floating -use clear
After the element floats, the surrounding elements will be arranged again.
CLEAR attribute Specifies on both sides of the specified element cannot appear.
Use the clear attribute to add a picture corridor to the text:
<! Doctype html>
<html>
<head>
<Title> Test </Title>
<Style>
.thumbnail
{{
Float: left;
width: 110px;
height: 90px;
margin: 5px;
}
.text_line
{{
Clear: Both;
margin-bottom: 2px;
}
</style>
</head>
<body>
<h3> Picture Library </h3>
<p> Try to adjust the window to see what happens when the picture does not have enough space. . </p>
<img class = "thumbnail" src = "83.gif" width = "107" height = "90">
<img class = "thumbnail" src = "83.gif" width = "107" height = "80">
<img class = "thumbnail" src = "83.gif" width = "116" height = "90">
<img class = "thumbnail" src = "83.gif" width = "120" height = "90">
<h3 class = "text_line"> Second line </h3>
<img class = "thumbnail" src = "83.gif" width = "107" height = "90">
<img class = "thumbnail" src = "83.gif" width = "107" height = "80">
<img class = "thumbnail" src = "83.gif" width = "116" height = "90">
<img class = "thumbnail" src = "83.gif" width = "120" height = "90">
</body>
</html>CSS all floating attributes
The number in the
“CSS” column represents different CSS versions (CSS1 or CSS2) defined the property.
| attribute | Description | value | CSS |
| clear | Specify that there are floating elements around the element. | left right both none inherit |
1 |
| float | Specify whether a box (element) can float. | left right none inherit |
1 |