1. Definition
CSS's Float (floating) will move the element to the left or right, and the surrounding elements will also be rearranged.
Float (floating) is often used for images, but it is also very useful for layout.
The horizontal direction of the element floats, which means that the element can only move left and right but not up and down. A floated element moves as far left or right as possible until its outer edge touches the border of the containing box or another floated box. Elements after the floated element will wrap around it. Elements before the floated element will not be affected.
If the image is floated right, the following text flow will wrap around to the left of it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-float浮动</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
2. Floating elements next to each other
If you put several floated elements together, they will be next to each other if there is room.
Here we use the float property for the image gallery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-float当没有足够空间会怎样？</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
3. Clear floating - use clear
After the element is floated, the surrounding elements will be rearranged. In order to avoid this situation, use the clear attribute.
The clear attribute specifies that no floating elements can appear on either side of the element.
| Attributes | describe | value | CSS |
|---|---|---|---|
| clear | Specifies that floating elements are not allowed around the element. | left right both none inherit |
1 |
| float | Specifies whether a box (element) can be floated. | left right none inherit |
1 |