Article reprinted from: css-tricks.com/all-about-f…

A floats. What is a floating layout?

Floats are the location property of the CSS. To understand its purpose and origin, we need to start with print design. In a printed layout, an image may be placed to the side of the layout, with text surrounding it if necessary. This is called font wrap. Here’s an example.

In page layout, the text inside the box can be wrapped with the image or ignored. Ignore the float, and the text will flow directly into the image as if it didn’t exist. So whether the image belongs to a floating layout or not affects the form of the presentation. The same goes for web design.

In web design, a page element with a float property behaves just as in a printed layout, with text wrapping around the image. The floating element still exists in the web document flow. This is a very different performance from absolute positioning. Absolutely positioned elements are removed from the document flow, just as text is programmed to ignore images. Absolute positioning does not affect other elements, and conversely, other elements do not affect absolute positioning elements, whether or not they are connected in layout. This is all we need to set an element as a floating layout: #sidebar {float: right; } Float property has four optional values: left, right, None, inherit. Left and right, as the name suggests, set the direction of the float. None is not floating and is the default value for the property. Inherit is an element that inherits its parent.

What’s the use of floating layouts

In addition to the simple text wrap example above, floating layouts can be used to complete the layout of an entire web page.

While floating layouts can still be used for web layouts, we now have more powerful methods for layouts, such as Flex and Grid layouts. But it’s still useful to know about floating layouts because they have some very personal features that will be covered throughout this article.

Floating layouts are still useful for small examples. Let’s use a small piece of a web page as an example. If we use a floating layout as the location method of the head. Then, as the image size changes, the surrounding text flows with it. But if we use absolute position +padding, the text on the right will not change with the size of the image.

Remove the floating

Another common float element is clear, which clears floating elements. Adjacency to float elements does not follow float elements’ Settings, but moves out of the float stream, just like a normal element. Let’s look at an example.

In the example above, the sidebar floats to the right, but its height is smaller than the main Content Area on the left, so the footer element will follow if there is room for it. To solve this problem, we can clear the footer float and leave it at the bottom.

Clear has five optional values: both, left, right, None, and inherit. Both is the most common, and left and right can only clear the direction they specify. None is the default and is usually not necessary unless you want to clear the value set to clear. Clearing only left or right may not sound very useful, but in some ways they make sense.

Height of collapse

One of the most confusing aspects of dealing with floating layouts is how they affect the elements that contain them (the parent elements). If the parent element has only floating elements, its height will collapse to zero. This is not obvious unless the parent element sets the background element. But it cannot be ignored.

As counterintuitive as it sounds, the alternative is worse. Consider the following.

If the upper block-level elements were automatically stretched out to accommodate the floating elements, we would have a discontinuous, abrupt white space in the text stream with no way to correct it. If that’s the case, designers will complain more than heights. Height collapse is a problem we have to deal with if we want to avoid layout clutter and compatible browsers.

Tips for cleaning up floats

If you are confident that you know how elements adjacent to float will behave, you can use clear:both; To finish your design. This is ideal because it doesn’t require fancy hacks and doesn’t add meaningless attributes. Of course, things are not as ideal as we expect, and sometimes we need to use other methods to clear the float.

  • Empty div element methodYeah, literally, it’s an empty div,<div style="clear:both;" ></div>Sometimes you see it<br>Tag or any other tag. But div is the most common, because it doesn’t have any default browser styles, doesn’t have any default browser behavior, and isn’t much affected by other CSS Settings. This approach has been rejected by semantic believers who believe that pages should not be tagged with meaningless tags. Technically, they’re right, but this approach gets the job done and doesn’t hurt anyone.
  • The overflow method sets the parent element to the overflow value. If this is set to auto or hidden, the parent element will inflate the float element. This method is still semantically elegant because it doesn’t add a new element, but when you find yourself adding a new div just so you can add that element to it, you’ll find that you’re still adding a meaningless element. Also note that setting overflow not only clears elements, but also triggers scrollbars and the like.
  • The simplest method of clearingIs to use a clever CSS suffix selector:afterTo clear the element, instead of setting overflow values on the parent element, set an additional ClearFix class on the parent element.
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
Copy the code

This makes a small change to the content and is not visible in the view at all, but there are compatibility issues on older browsers that need to be addressed further. Different scenarios use different cleanup methods, such as the following example.

To visually distinguish the same elements, we create a new line and place elements of the same color on the same line. We can use overflow or clear attributes if each set of elements has a parent element. Or we’ll insert an empty div element between each group of elements. Three wrap divs that didn’t exist before this or three insert divs that didn’t exist before this. For readers to choose.

Problems with floating elements

Floating elements are notoriously fragile. The main vulnerability is IE6 compatibility and some bugs with float itself. More and more designers are dropping their support for IE6. You probably don’t care, but for those who do, here’s how:

  • Overflow is a classic float element problem, where the width overflows rather than affecting the overall layout when the inner element is larger than the float element. IE will spread out the width. A classic example is the sidebar that is pushed down by an image.

  • Margin overlap problemAnother problem with IE6 is high overlap, which can double the margin if you set a margin in the same direction on a float element. Solution: Setdisplay:inline;And don’t worry about it becoming an inline element.
  • 3px jog Follows the text of the float element with a magical 3px margin. Solution: Set the width or height of the text.
  • When a floating parent has floating child elements, the bottom margin is ignored by the parent element. Fix this: use the bottom inner margin.

other

If you need text to surround an image, there is no other solution than float. Speaking of which, take a look at this article on how to wrap text around irregular shapes. But there are definitely better options for page layout.