This is the 13th day of my participation in the August More Text Challenge, for more details: August more Text Challenge!

The document flow

Before we dive into floats, let’s familiarize ourselves with document flow in CSS

Document flow refers to the way elements are automatically arranged by default from left to right and from top to bottom. Finally, the form is divided into rows from top to bottom, and elements are arranged from left to right in each row

Standard document flows fall into two categories:

  • Block-level elements:

1). Occupy a line that cannot be juxtaposed with any other elements

2). Can accept width and height

3). If you do not set the width, the width will default to 100% of the father, that is, as wide as the father

  • Inline elements:
  • 1). Side by side with other elements
  • 2). Width and height cannot be set. The default width is the width of the text

Out of document flow

Once a document leaves the document flow, the height of its parent element is counted without including itself

Ways to get out of the document flow:

  1. Float
  2. Absolute positioning
  3. Fixed position

floating

A floating box can move left or right until its outer edge touches the border that contains the box or another floating box. Because the float box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the float box does not exist.

Attribute values Break down
left Element floats to the left
right Element floats to the right
none The default value. The element does not float and is displayed where it appears in the text
inherit Specifies that the value of the float property should be inherited from the parent element

Features:

  1. The float will leave the document flow
  2. Floats can be arranged inline
  3. Floating causes the parent element to collapse highly

Application:

  1. Text wrap effect
  2. Floats allow for regular multi-column layouts, and are more suitable for adaptive multi-column layouts, such as fixed width on the left and adaptive width on the right according to the parent element
  3. Multiple elements are arranged inline, and floats can implement an arrangement similar to inline-block

Remove the floating

Why clear the float?

Because floating elements move out of the normal document flow and do not occupy the position of the document flow, if a parent element has floating elements underneath it, the parent element cannot be stretched out by the floating element, and the parent element loses height. This is known as the height collapse problem caused by floating

The way to clear the float

There are two general categories:

  1. By triggering the BFC

One of the features of the BFC is that the height of the floating child element is taken into account when calculating the height of the BFC. Therefore, the float can be effectively cleared by triggering the BFC

2. Use the Clear attribute to clear floats

Put a tag under the floating box or use the dummy element :after, and use clear:both in the tag and dummy element to clear the floating effect on the page