Floating concept
Block-level elements cannot display multiple elements on the same line in the document flow, and gaps will appear between elements after converting them into inline elements or inline block elements. To achieve the layout effect, float (float) is used. The floating box can move left or right until its edge touches the border of the parent box or the border of another floating element. Floating causes the element to leave the document flow (standard flow), that is, it no longer occupies a position in the document flow.
- As shown in the figure, when box 1 is floated to the right, it leaves the document flow and moves to the right until its right edge touches the right edge of the containing box.
- As shown in the figure, when box 1 floats to the left, it breaks out of the document flow and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it does not occupy space, and actually covers Box 2, making Box 2 disappear from view.
- As shown in the figure, if the containing frame is too narrow to accommodate the three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is not enough, they may be "stuck" by other elements when they move down.
- When an element is floating, it moves up and down until the top edge touches the bottom edge of the previous element (floating element or standard flow element), or is aligned with the top edge of the previous floating element; it moves left and right until it touches the edge of other elements or contains elements To the edge. as the picture shows.
Floating characteristics
- Floating elements will fall out of the document flow (off-label) .
- Floating elements will be displayed in a row and aligned at the top .
- Floating elements will have the characteristics of inline elements .
- Floating elements will only affect the following standard stream and will not affect the previous standard stream .
- Any element in the display mode can be set to float .
- An element is set with a floating attribute, theoretically the rest of the sibling elements should also be floating (to prevent layout problems affecting the sibling elements) .
The problems that often occur when sibling elements are not set to float at the same time are:
- The elements in the back are covered by the floating elements in the front.
- The following floating elements cannot be displayed on the same line because the previous sibling elements are not floating.
Clear float
High collapse problem
Since the parent element will not directly give the height in many cases (the height is stretched by the content), the child elements inside will no longer occupy space after leaving the document flow. The height of the content of the parent element changes (collapsed), which affects the position of the document flow box under the parent element .
Solve the problem of high collapse
To solve the problem of height collapse, the essence of clearing floats is to clear the influence of floating elements on the height of the parent element. If the parent element box itself has a height, there is no need to clear the float. The method is to add the clear attribute to the child elements in the parent element .
selector {
clear:left;
}
/*清除该元素左边浮动元素对父元素的高度的影响*/
/*可以设定的值还有right、both*/
The usual strategy to solve the problem of high collapse is to close the float, that is, the effect of the float is limited to the inside of the parent element.
- Add an empty block-level label below the floating element and add a clear floating style to it
<div style="clear:both">
</ div>
<!--但是添加了无意义的标签，结构性较差。-->
- Add the overflow: hidden\auto\scroll attribute to the parent element. The code is concise but there will be a problem that the overflow part cannot be displayed.
- Add the after pseudo-element to the parent element.
.clearfix:after {
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
/*ie6、ie7专用*/
*zoom:1;
}
- Add double pseudo-elements to the parent element.
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*ie6、ie7专用*/
*zoom:1;
}
Note: Clearing the float solves the effect of the height collapse of the parent element on the elements below it, not the effect of the floating element inside on the child element (the element located behind the floating element) inside the parent element. You should usually pay attention to the difference between these two effects.
Dust / 2020/12/20