Why clear floats?
To answer this question, we must first talk about the positioning mechanisms in CSS: normal flow, float, absolute positioning (where "position:fixed" is a subclass of "position:absolute").
1) Ordinary flow: Many people or articles call it document flow or ordinary document flow. In fact, there is no such word in the standard. If the document flow is translated directly into English, it is document flow, but there is only another word in the standard, called normal flow, or normal flow. But it seems that everyone is more accustomed to the name of the document stream, because many Chinese translated books come from this way. For example, in "CSS Mastery", the English original book only has the word normal flow from beginning to end, and document flow has never appeared.
2) Floating: The floating box can move left and right until Its outer edge meets the edge of the containing box or another floating box. Floating boxes do not belong to the normal flow in the document. When an element is floated, it will not affect the layout of block-level boxes but only affect the arrangement of inline boxes (usually text), and the normal flow in the document will behave like If the floating box does not exist, when the height of the floating box exceeds the containing box, the containing box will not automatically stretch to close the floating element (the "height collapse" phenomenon). As the name implies, it floats on the ordinary stream, like a floating cloud, but it can only float left and right.
It is precisely because of this characteristic of floating that after the element that belongs to the ordinary flow is floated, since there are no other ordinary flow elements inside the containing box, the height is 0 (height collapse). In actual layout, this is often not what we want, so we need to close the floating element so that its containing box shows a normal height.
How to clear floats:
Initial code:
html：
<body>
<div class="bigger">
<div class="smaller1"></div>
<div class="smaller"></div>
</div>
<div class="footer"></div>
</body>
css：
.footer{ width: auto; background: cyan; height: 600px; } .bigger{ border: double; color: red; } .smaller{ height: 200px; width: 200px; background: blue; float: left; } .smaller1{ height: 200px; width: 200px; background: yellow; float: left; }
1. Extra tag method (recommended by w3c): selector {clear: attribute value (commonly right/both)}
Pros: Easy to understand, easy to use
Disadvantages: Add a lot of meaningless tags, poor structure. Although it is recommended by W3C, it is not recommended for personal use.
By adding an empty tag such as <div class="clear"></div> or <br> at the end of the tag
Code after change:
<body>
<div class="bigger">
<div class="smaller1"></div>
<div class="smaller"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
.footer{
width: auto;
background: cyan;
height: 600px;
}
.bigger{
border: double;
color: red;
}
.smaller{
height: 200px;
width: 200px;
background: blue;
float: left;
}
.smaller1{
height: 200px;
width: 200px;
background: yellow;
float: left;
}
.clear{
clear: both;
}
Changed interface:
2. The overflow element clears the float (the overflow attribute specifies what happens when the content overflows the element box.)
overflow has the following elements:
| value | describe |
|---|---|
| visible | Defaults. The content will not be trimmed and will be rendered outside the element box. |
| hidden | The content is trimmed and the rest of the content is invisible. |
| scroll | The content is trimmed, but the browser displays scroll bars to view the rest of the content. |
| auto | If the content is trimmed, the browser displays scroll bars to view the rest of the content. |
| inherit | Specifies that the value of the overflow attribute should be inherited from the parent element |
Advantages: There are no structural and semantic problems, and the amount of code is very small . Disadvantages: When the content increases, it is easy to cause
the content to be hidden, and the elements that need to overflow cannot be displayed . Invalid, this is unacceptable as a multi-tab browser control. So don't use it
Method: Add: overflow: hidden in the parent element of the floating box;
Code: HTML
<body> <div class="bigger"> <div class="smaller1"></div> <div class="smaller"></div> </div> <div class="footer"></div> </body>css：
.footer{
width: auto;
background: cyan;
height: 600px;
}
.bigger{
border: double;
color: red;
overflow: hidden;
}
.smaller{
height: 200px;
width: 200px;
background: blue;
float: left;
}
.smaller1{
height: 200px;
width: 200px;
background: yellow;
float: left;
}
User Interface:
get the same effect
3. After clearing the float
It should be noted that: after is a pseudo-element, not a pseudo-class (called "pseudo-object" in some CSS manuals), and many articles such as clearing the float are called pseudo-classes, but csser should be stricter, this is an attitude.
Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.
html：
<body>
<div class="bigger">
<div class="smaller1"></div>
<div class="smaller"></div>
</div>
<div class="footer"></div>
</body>
css：
.clearfix:after{/*Normal browser clears the float*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{/* IE browser clear floating method*/
zoom: 1;
}
.footer{
width: auto;
background: cyan;
height: 600px;
}
.bigger{
border: double;
color: red;
}
.smaller{
height: 200px;
width: 200px;
background: blue;
float: left;
}
.smaller1{
height: 200px;
width: 200px;
background: yellow;
float: left;
}
Advantages: The structure and semantics are completely correct, and the amount of code is centered.
Disadvantages : Improper reuse will increase the amount of code
4. Before and after clearing the float
html
<body> <div class="bigger"> <div class="smaller1"></div> <div class="smaller"></div> </div> <div class="footer"></div> </body>
css
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix:after{
*.zoom1/*IE6、IE7*/
}
.footer{
width: auto;
background: cyan;
height: 600px;
}
.bigger{
border: double;
color: red;
}
.smaller{
height: 200px;
width: 200px;
background: blue;
float: left;
}
.smaller1{
height: 200px;
width: 200px;
background: yellow;
float: left;
}