What elements can sense floating elements

Floating elements leave the document flow

  • Block-level elements/inline block-level elements are not aware of floating elements and will occupy the position of the floating element in the standard flow and will therefore be overwritten by the floating element
  • Inline elements (span, etc.) and text are aware of floating elements, so they are not affected and will have a wrap effect.

How do floating elements get positioned

  • If a floating element is preceded by no element, it floats in its position in the standard flow
  • If the preceding element is block-level and is an element in the standard flow, the position remains relatively vertical, and the top of the floating element is aligned with the bottom of the previous block-level element
  • If it is preceded by a floating element, it follows the preceding element, unless there are no more than two elements in the row and the following element is squeezed onto the next line

Div2, div4 float div3 block level element, blocked part of div4 above div3, non-float element, remain relatively vertical position unchangedCopy the code

Div2, div3 float div4 block level element, cannot sense float element, move up is blockedCopy the code

Set div2, div3 and div4 to float right note: div2 is most rightCopy the code

Inline elements become floating elements

Inline elements cannot be set to width and height. When they become floating elements, setting width and height takes effect

On which element does the float Settings clear

If there are only two elements in the page, div1 and div2, and they float left, the scenario looks like this:

In div1 set clear:right; But it didn’t work

When it comes to CSS clear, it’s important to remember that this rule only affects the element being cleared, not other elements.

So you want div2 to move, so just use clear:left in the CSS style for Div2; To specify that no floating elements are allowed to the left of the div2 element, forcing div2 to move down a row.

The left and right width of a three-column layout is fixed and the middle is adaptive. (Floating solution)

Since the float element is in a single column, it must not be after the block-level element, so the block-level element, the middle element, is set after the float element.

Middle adaptive, do not set width

The left and right column elements are set to float, and the width is set

The middle element is prevented from being used to set margin to the width of the floating element