CSS Float and Clear Float

Problem Description:
Float is an important layout technique in CSS, initially designed to achieve text wrapping around images, and now widely used in web page layouts. However, floated elements are removed from the normal document flow, causing issues such as parent element height collapse, thus requiring the clear float technique. Please explain in detail the characteristics of float, the problems it causes, and common methods to clear floats.

Knowledge Point Explanation:

1. Basic Characteristics of Float

• Floated elements are removed from the normal document flow and move left or right until they touch the border of the parent element or other floated elements.
• Floated elements do not occupy space in the normal document flow, but content in the document flow will wrap around floated elements.
• Floated elements have the characteristics of block-level boxes (width and height can be set, default width is content width).

2. Problem Caused by Float - Height Collapse
When a parent element contains floated elements and does not have a set height, the height collapse problem occurs:

<div class="parent">
  <div class="float-left">Left Float Element</div>
  <div class="float-right">Right Float Element</div>
</div>

.float-left { float: left; width: 100px; height: 100px; }
.float-right { float: right; width: 100px; height: 100px; }
.parent { border: 2px solid red; } /* Parent element height is 0 */

In this case, the parent element's height is 0, and only a horizontal line of the border is visible.

3. Solutions to Clear Floats

Method 1: Using Empty Element to Clear Floats

<div class="parent">
  <div class="float-left">Left Float</div>
  <div class="float-right">Right Float</div>
  <div style="clear: both;"></div> <!-- Clear float -->
</div>

• Add an empty element at the end of the parent element and set clear: both.
• Advantage: Good browser compatibility.
• Disadvantage: Adds meaningless tags, affecting HTML structure.

Method 2: Using Pseudo-element to Clear Floats (Recommended)

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="parent clearfix">
  <div class="float-left">Left Float</div>
  <div class="float-right">Right Float</div>
</div>

• Add content at the end of the parent element using CSS pseudo-element.
• The most commonly used method in modern layouts.
• Requires adding the clearfix class to the parent element.

Method 3: Triggering BFC to Clear Floats

.parent {
  overflow: hidden; /* or auto */
  /* or use display: flow-root; */
}

• Trigger BFC by setting overflow: hidden/auto or display: flow-root.
• BFC (Block Formatting Context) will contain internal floated elements.
• display: flow-root is a property specifically designed to clear floats with no side effects.

4. Comparison of Various Methods

• Empty Element Method: Good compatibility but poor semantics.
• Pseudo-element Method: Most commonly used, good semantics, compatible with IE8+.
• BFC Method: Simple and convenient, but overflow: hidden may hide content.
• display: flow-root: Supported by modern browsers, the most ideal solution.

Summary:
Float layout requires the use of clear float techniques. The pseudo-element method is recommended as a general solution, and display: flow-root can be considered for new projects. Understanding the characteristics of float and the principles of clearing floats is an important foundation for mastering CSS layout.