first, why to clear floating
Floating can cause the parent container to collapse, causing errors in page layout, and so on.
Example:
<body> <div class= "Parent_div" > <div class= "Float_div" >float left float left float left float left.....</div> <div class= "Child_two_div" >child_two_div child_two_div child_two_Div ... </div> </div> <div class= "Bottom_div" >bottom_div bottom_div bottom_div bottom_div .... </div> </body>
Style:
. parent_div {
width:500px;
BORDER:3PX solid black;
}
. float_div {
width:100px;
height:100px;
border:2px dotted #C7254E;
color:red;
margin:4px;
Float:left;
}
. bottom_div {
width:500px;
height:100px;
margin:5px 0;
border:2px dotted black;
}
. child_two_div {
Color:aqua;
BORDER:2PX solid aqua;
}Chrome Rendering Results:
This is obviously not the effect we want because it may have the following problems:
1. Text is formatted around a floating element (. Float_div), however, the result we want is that the text of the (. child_two_div) element is arranged below the floating element and does not want a floating element (. child_two_div) to exist on either side.
2. The floating element (. float_div) layout exceeds its parent element, and the parent element collapses in height.
3. The floating element (. float_div) Even affects the layout of the sibling element (. Bottom_div) of its parent element (. parent_div). This is because floating elements are out of the document flow. Bottom_div ignores the effect when the element position is calculated, and then the position of the previous element continues to be arranged.
Knowing the problem, here's how to clear the float:
second, the method of clearing floating
1. Use the clear style
To add a style to an element that needs to clear the float:
. child_two_div {
Color:aqua;
BORDER:2PX solid Aqua;
Clear:left; /* Add clear floating style */
}The rendering effect (the clear value for both also has the same effect):
The above style ensures that there are no floating elements on the left side of the (. child_two_div) element, and that the height of the parent element is also propped up, and the rendering of its sibling elements is no longer affected by the float.
But if we swap the (. child_two_div) Element and the (. float_div) element in the HTML for a position.
Render Result:<body> <div class= "Parent_div" > <div class= "Child_two_div" > child_two_div child_two _div child_two_div ... </div> <div class= "Float_div" > float left float left float left float left ... </div> </div> <div class= "Bottom_div" > bottom_div bottom_div bottom_div bottom_div ... </div> </body>
Use the clear floating style for the. Child_two_div element:
. child_two_div {
Color:aqua;
BORDER:2PX solid Aqua;
Clear:left; /* Add clear floating style */
}Results:
As can be seen from the rendering effect, the rendering results are the same as when the position is swapped, regardless of whether the. Child_two_div element is applied to clear floating styles.
This is because the position of the. Child_two_div element is determined, and then the floating element is immediately followed by the. Child_two_div element is rendered on the left side of the parent element. However, the height of the parent element is not propped up, and the floating effect is not ' inline ', causing the float to affect the composition of the next element.
So, it seems, to achieve the purpose of supporting the height of the parent element, using clear to clear the float is still a certain scope of application, so we need a more reliable, common approach.
2. Insert a clear floating block-level element before the parent element ends the tag
The HTML structure is as follows:
<body>
<div class= "Parent_div" >
<div class= "Child_two_div" >
child_two_div child_two _div child_two_div
... </div>
<div class= "Float_div" > float left float left float left
float left ...
</div>
<div class= "More" ></div>
</div>
<div class= "Bottom_div" >
Bottom_div bottom_div bottom_div bottom_div ...
</div>
</body>To add a style to a new element:
. more{
clear:both;
}Render Result:
This method, and use clear to clear the float, prop up the parent element with the same height principle.
3. Using pseudo-elements
The HTML structure is as follows, adding a class name to the. Parent_div element Clearfix
<body> <div class= "Parent_div clearfix" > <div class= "Child_two_div" > child_two_div Child_two_div child_two_div child_two_div child_two_div child_two_div child_two_div child_two_Div child_two_Div </div> <div class= "Float_div" > float left float left float left float left </div> </div> <div class= "Bottom_div" > bottom_div bottom_div bottom_div bottom_div child_two_div Child _two_div child_two_div child_two_div child_two_div child_two_div </div> </body>
The style sheet is as follows:
. clearfix:after{
content: '. ';
height:0;
Clear:both;
Display:block;
}The style is added at the end of the parent element: after pseudo-elements, which prop up the height of the parent element by clearing the pseudo-element float.
The display value of this element is block, which indicates that it is an invisible block-level element (some places use Tabel, because Tabel is also a block element)
Render Result:
4. Use overflow to clear floating
The HTML structure is as follows:
<body> <div class= "Parent_div" > <div class= "Child_two_div" > child_two_div child_two _div child_two_div child_two_div child_two_div child_two_div child_two_div child_two_div child_two_Div </div > <div class= "Float_div" > float left float left float left float left </div> </div > <div class= "Bottom_div" > bottom_div bottom_div bottom_div bottom_div child_two_div child_two_Div Child_two_div child_two_div child_two_div child_two_div </div> </body>
Style sheet:
. parent_div {
width:500px;
BORDER:3PX solid black;
/* Use overflow to clear floating */
overflow:auto;
}Render Result:
Simply adding a overflow property with a value of auto to the parent element will give you the ability to prop up the height of the parent element, wrapping the floating element. In fact, the overflow value here, but also can be any value other than visible, can be reached to prop up the height of the parent element, clear floating effect. However, some values can have side effects, such as the scroll value causes the scrollbar to always be visible, and the hidden value causes the value beyond the bounding rectangle to be invisible, and so on.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
