CSS Floating

The floating box can move to the left or right until its outer edge hits the border of the containing box or another floating box.

Since the float box is not in the normal flow of the document, the block boxes in the normal flow of the document behave as if the float box does not exist.

CSS Floating

See the figure below, when box 1 floats to the right, it脱离 the document flow and moves to the right until its right edge hits the right edge of the containing box:

CSS Floating Example - Elements Floating to the Right

See the figure below, when box 1 floats to the left, it脱离 the document flow and moves to the left until its left edge hits the left edge of the containing box. Because it is no longer in the document flow, it does not take up space and actually covers box 2, making box 2 disappear from view.

If all three boxes are moved to the left, box 1 will float to the left until it hits the containing box, and the other two boxes will float to the left until they hit the previous float box.

CSS Floating Example - Elements Floating to the Left

As shown in the figure below, if the containing box is too narrow to accommodate the horizontal arrangement of three float elements, then the other float blocks will move down until there is enough space. If the heights of the float elements are different, they may be 'stuck' by other float elements as they move down:

CSS Floating Example 2 - Elements Floating to the Left

CSS float Property

In CSS, we achieve element floating through the float property.

For more information on the float property, please visit the reference manual:CSS float Property.

Line box and clearing

The line box next to the float box is shortened, thus providing space for the float box and causing the line box to wrap around the float box.

Therefore, creating a float box can make text wrap around images:

Line Boxes Surrounding Floating Boxes

To prevent the line box from wrapping around the float box, it is necessary to apply clear attribute. The value of the clear attribute can be left, right, both, or none, indicating which sides of the box should not be adjacent to the floating box.

To achieve this effect, set the margin of the element being cleared toTop marginAdd enough space on top to make the top edge of the element vertically drop below the floating box:

clear Property Example - Applying clear to Line Boxes

This is a useful tool that allows surrounding elements to provide space for the floating element.

Let's look more closely at floating and clearing. Suppose you want to float an image to the left of a text block and want this image and text to be contained in another element with a background color and border. You might write the following code:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

In this case, a problem has arisen. Because the floating element has detached from the document flow, the div enclosing the image and text does not take up space.

How to visually enclose the floating element with the surrounding element? You need to apply clear in some place of this element:

clear Property Example - Cleaning Up Empty Elements

Unfortunately, a new problem has arisen. Since there is no existing element to apply clearing, we can only add an empty element and clear it.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

This can achieve the effect we want, but it requires additional code. Often there are elements that can apply clear, but sometimes you have to add meaningless markup for layout.

However, we have another way, which is to float the container div:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

This will achieve the effect we want. Unfortunately, the next element will be affected by this floating element. To solve this problem, some people choose to float everything in the layout and then use appropriate meaningful elements (often the site's footer) to clear these floats. This helps to reduce or eliminate unnecessary markup.

In fact, all pages on the CodeW3C.com site use this technology. If you open the CSS file we use, you will see that we have cleared the div for the footer, and the three divs above the footer float to the left.

CSS clear Property

We just discussed in detail the working principle of CSS clearing and the application method of the clear attribute. If you want to learn more about the clear attribute, please visit the reference manual:CSS clear Property.

Floating and Cleaning Example

Simple Application of float Property
Float an image to the right of a paragraph.
Float an image with borders and margins to the right of the paragraph
Float an image to the right of the paragraph. Add borders and margins to the image.
Image with a title floating to the right
Float an image with a title to the right
Float the first letter of the paragraph to the left
Float the first letter of the paragraph to the left and add styles to this letter.
Create a horizontal menu
Create a horizontal menu using floating with one-column hyperlinks.
Create a homepage without tables
Use floating to create a homepage with a header, footer, left directory, and main content.
Clearing the Side of the Element
This example demonstrates how to use a clearing element to float the floating elements on the side.