CSS Float

wang xiao bo 's photo
wang xiao bo
·

3 min read

The Float of CSS 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 in layout.

How elements float The horizontal floating of the element means that the element can only move left and right but not up and down. A floating element will move to the left or right as far as possible until its outer edge hits the border of the containing box or another floating box. The elements after the floating element will surround it. The element before the floating element will not be affected. If the image is floating to the right, the following text stream will wrap around it to the left:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Novice Tutorial (runoob.com)</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>In the following paragraph, we have added a <b>float:right</b> image. As a result, the picture will float to the right of the paragraph. </p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

Floating elements next to each other If you put several floating elements together, they will be next to each other if there is space. Here, we use the float attribute for the image gallery:

<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Photo Gallery</h3>
<p>Try adjusting the window and see what happens when the picture does not have enough space. </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>

Clear the float-use clear After the element floats, the surrounding elements will be rearranged. To avoid this, use the clear attribute. The clear attribute specifies that no floating elements can appear on both sides of the element. Use the clear property to add an image gallery to the text:

<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Photo Gallery</h3>
<p>Try adjusting the window and see what happens when the picture does not have enough space. .</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">
<h3 class="text_line">Second line</h3>
<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>
CSS