How to clear float
1. What is floating?
The floating definition given in W3school is that a floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. Since the float is out of the normal flow of the document, the block box in the normal flow of the document behaves as if the float was not there.
2. What are the characteristics of floating?
The characteristics of floating can be summed up in eight words: off-label, welt, word circumference and shrinkage.
For better illustration, look at the image below:
When Box 1 floats to the left, it breaks out of the document flow (off-label) and moves to the left (tape) until its left edge touches the left edge of the containing box. Because it's no longer in the document flow, it doesn't take up space and actually covers Box 2, making Box 2 disappear from view. If there is text in box 2, it will be arranged around box 1 (word circle).
If all three boxes are floated to the left, then box 1 floats to the left until it hits the containing box, and the other two boxes float to the left until they hit the previous floated box. The following focuses on the fourth feature - shrinkage
A floating inline element (such as a span img tag) can have a width set without setting display:block.
<style>
div{
float: left;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
this is a text
</div>
</body>
The following effect is obtained: We all know that the div tag is a block-level element and will occupy a single line. However, in the above example, after the div is set to float to the left, its width is no longer a full line, but is tightened to the width of the inner element. , which is what the fourth feature of float means.
3. What are the disadvantages of floating?
Take a look at the following code:
<style>
.parent{
border: solid 5px;
width:300px;
}
.child:nth-child(1){
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.child:nth-child(2){
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.child:nth-child(3){
height: 100px;
width: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
We wanted the parent container to wrap three floated elements, but it backfired and got this result: This is the side effect of floating - the height of the parent container collapses, so cleaning up the float is significantly critical.
4. How to clean up floating?
Clearing the floating is not without floating, but the height of the parent container caused by clearing the floating is collapsed .
Routine 1: Add height to the parent element of the floating element (poor expansion)
If an element is to float, its parent element must have a height. The height of the box can be closed to float. You can directly set the height of the parent element. In practical applications, it is unlikely that we will increase the height of all boxes, which is not only troublesome, but also cannot adapt to the rapid changes of the page; another way, the height of the parent container can be stretched by the content (such as img Picture), in practice this method is used more.
Routine 2: clear:both;
Add the last redundant element to the last child element, and then set it to clear:both, so that the float can be cleared. It is emphasized here that the element added at the end of the parent element must be a block-level element, otherwise the height of the parent element cannot be supported .
<div id="wrap">
<div id="inner"></div>
<div style="clear: both;"></div>
</div>
#wrap{
border: 1px solid;
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}
Routine 3: Pseudo-element clearing float
The above method can clear the float, but we don't want to add these meaningless redundant elements to the page. How to clear the float at this time?
Combined with the :after pseudo-element and IEhack, it can be perfectly compatible with the current major browsers. IEhack here refers to triggering hasLayout .
<div id="wrap" class="clearfix">
<div id="inner"></div>
</div>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}
/*Open haslayout*/
.clearfix {
*zoom: 1;
}
/*ie6 7 does not support pseudo-elements */
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden;//Allows the browser to render it, but does not display it
}
Add a clearfix class to the parent container of the floated element, and then add an :after pseudo-element to this class to add an invisible block element at the end of the element to clear the float. This is a general cleanup float scheme, recommended
Routine 4: Use overflow:hidden for the parent element;
This scheme allows the parent container to form a BFC (block-level formatting context), and the BFC can contain floats, which are usually used to solve the problem of height collapse of floating parent elements.
How to trigger BFC
We can add the following properties to the parent element to trigger BFC:
float is left | right
overflow is hidden | auto | scorll
display is table-cell | table-caption | inline-block
position is absolute | fixed
Here you can set overflow:auto to the parent element, but it is best to use overflow:hidden for compatibility with IE.
But this method has a flaw: if there is any content out of the box, this method will cut off more parts, so it cannot be used at this time.
Main features of BFC:
- The BFC container is an isolated container that does not interfere with other elements; so we can solve the vertical margin collapse problem by triggering the BFC of two elements.
- BFC does not overlap floated elements
- BFC can contain floats, which can clear floats.
Routine 5: The br tag is clear and floated
The br tag has an attribute: clear. This property is a powerful tool that can clear the float, set the property clear in the br tag, and assign the value all. That is, the float can be cleared .
<div id="wrap">
<div id="inner"></div>
<br clear="all" />
</div>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}