What are the points you need to pay attention to when floating css elements?

Notes: 1. The left outer boundary of a floating element cannot exceed the left inner boundary of its containing block, and the same goes for the right outer boundary; 2. The top of a floating element cannot be higher than the inner top of its parent element. ; 3. The top of the floating element cannot be higher than the top of the previous floating element or block-level element; 4. The left floating element must be as far to the left as possible, the right floating element must be as far to the right as possible, etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Floating in css:

In order to move an element to the left or right of the parent element in css, we can set the float to the element float.

float:left/right

There are two floating options, one is float:left. There is also float:rightright float

If float is set to an element, then the element will break away from the standard document flow, and the element behind the element will occupy the original position of the element, and the element behind it will content will be squeezed out.

The element with floating elements has no width and height, and the height of the parent element of the element will also be displayed, that is, the height collapses. The width and height of the element with floating elements are dynamically based on the content inside the element. changing. To reset the height of its parent element.

If left floating is set for some elements, then these elements will be displayed in the same row, but if the sum of the widths of these elements is greater than the parent element, the excess part (including the element) will be below One line is displayed.

Rules that floating elements need to follow (notes)

• The left outer boundary of floating elements cannot beyond the left inner boundary of its containing block, and the same goes for the right

• To prevent elements from covering each other, the left (or right) outer boundary of a floated element must be the previous left float ( The right (or left) outer border of a right-floated) element, unless the top of the later-floated element is below the bottom of the first-floated element.
  

• The left outer boundary of a floated element must be the right outer boundary of the left floating element that appears before it in the source file, unless the top of the later floating element is before the top of the first floating element. below the bottom.

• The right outer border of a left-floated element will not appear to the right of the left outer border of a right-floated element to its right.

• The top of a floating element cannot be higher than the inner top of its parent element

• The top of a floating element cannot be higher than all previous floating elements or The top of a block-level element is higher

• If a floated element appears before another element in the source document, the top of the floated element cannot be higher than the top of any line box containing the box generated by the element. higher.

• Floating elements cannot exceed the boundaries of their containing elements. The left (or right) floating element has another floating element to the left (or right), and the right outer boundary of the former cannot be to the right (or left) of the right (or left) boundary of its containing block. If there is not enough space, the floated element will be squeezed onto a new "row"

• Floated elements must be placed as high as possible. That is, under the premise of satisfying other constraints, float as high as possible.

• The left-floated element must be as far to the left as possible, and the right-floated element must be as far to the right as possible

Float Sorting rules

• Floating elements in the same direction will be displayed in front because floating elements will only cover the standard flow.

• For floating elements in different directions, if you float left, look for left float, if you float right, look for right float.

• The position of the floating element after floating is determined by the standard stream before the floating element floats. Determine the position.

• Sticking phenomenon: If the last floating element exceeds the width of the parent element, it will automatically find the next element and stick it to it. If the width is still not enough, continue to find Previous~ If the width of the parent element is still not enough, then you can only make do with it

• mixed graphics and text

Clear floating

• Set the height of the previous parent element (it is best not to set the height during development, so this convenience is not recommended)

• Set the clear attribute for the following elements (note that the margin attribute will become invalid after adding the clear attribute)

• Partition method

  • Exterior wall method

    Add a block-level element in the middle and set clear: both (Note: You can use margin-top in the second box, but you cannot use margin-bottom in the first box , so generally neither the margin-bottom of the first box nor the margin-top of the second box is set, but the height of the additional block-level element is directly set)

  • Inner wall method

    Write the block-level element to the end of the first box and set clear: both (note: the first box can use margin-bottom, and the second box can also use margin-top. Extra Block-level elements can also set height)

  • Difference: The interior wall method can support the height of the first box, but the exterior wall method cannot. (The modified method is also not recommended because additional elements are added)

Use pseudo elements (recommended)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

overflow: hidden(recommended)

.box1{
    *zoom: 1;   // 兼容IE6
}

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What are the points you need to pay attention to when floating css elements?. For more information, please follow other related articles on the PHP Chinese website!