Detailed explanation of the floating function of HTML

2024-07-12

"Float" in HTML is a CSS layout technique that was originally designed to wrap text around images or achieve simple layout effects, such as arranging elements side by side. However, with the evolution of Web development, floats are also widely used in more complex page layout designs, although modern CSS provides more advanced layout methods (such as Flexbox and Grid).

The basic function of floating

Text Wrapping: This is the most primitive and intuitive application of floats. When an image (or other block-level element) is set to float, the surrounding text flows around it instead of continuing in the normal document flow (top to bottom, left to right).
Side-by-side layout: By setting floats on multiple elements, you can make them line up side by side instead of the default stacking. This is very useful when creating navigation bars, image galleries, or any layout that requires elements to be arranged horizontally.

How to use float

CSS properties:passfloatThe property can accept several values, includingleft、right、none(default, meaning no float) andinherit(Inherits the parent element'sfloatvalue).
example：


<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    .float-left {  
      float: left;  
      width: 50%;  
    }  
    .float-right {  
      float: right;  
      width: 50%;  
    }  
  </style>  
</head>  
<body>  
 
<div class="float-left">左边的内容</div>  
<div class="float-right">右边的内容</div>  
 
</body>  
</html>

In this example, two<div>Elements are set byfloat: left;andfloat: right;Implemented side-by-side layout.
The impact of floating
Out of document flow: Floated elements are removed from the normal document flow, which means they no longer take up the original space, and other non-floated elements ignore their existence and fill the space they leave.
Impact on subsequent elements: Non-floated elements following a floated element attempt to fill the space left by the floated element, but the floated element itself does not overlap the content or borders of subsequent elements.
Clear Float: In order to avoid unpredictable effects of floating on subsequent layout, it is usually necessary to use a method to clear floating, such as usingclear: both;property, pseudo-element cleanup, or establishing a new block formatting context (such as usingoverflow: auto;ordisplay: flex;）。

Summarize

Although floating is one of the important layout techniques in web development, it also brings some complexity and limitations. With the emergence of modern CSS layout technologies such as Flexbox and Grid, the application of floating in complex layouts has gradually decreased, but in some simple scenarios or projects that need to be backward compatible with old browsers, floating is still a useful tool.

We will continue to update and share relevant content in the future.Remember to pay attention!

Technology Sharing