Home > Developer > Web Develop
The float property is often used in CSS layouts, but using the float property causes it to break out of the parent container in a normal stream, which is very upsetting.
1 floating brings the convenience of layout, but also brings new problems1 <!doctype html> 2The effect we want to see is this.
But it turned out that way.
The parent container does not enclose the floating child elements, commonly known as collapse, in order to eliminate this phenomenon, we need some clear floating skills.
2 How to clean up floatingThere are two ways to clean up floats
- Use the clear property to clear floating
- Causes the parent container to form BFC
See for yourself.
2.1 Use the Clear property to clear floatingWhat is a clear attribute? The Clear property specifies which side of the element does not allow other previously floating elements, modifying the code just
<div class= "P" > <div class= "C" ></div> <div class= "C" style= "clear:left;" ></div> <div class= "C" ></div></div>After the second Div has added the Clear:both property, its left div (the first Div) no longer floats, so the following div will be ok (Huan hang). We can use craved to add an empty div at the end of the parent container and set the property clear:left so that we can achieve our goal.
2.1.1 Add empty div cleanup floatsJust a little bit of a change to our code.
<div class= "P" > <div class= "C" ></div> <div class= "C" ></div> <div Class= "C" ></div> <div style= "clear:left;" ></div></div>That is, the parent container is added last
<div style= "Clear:left;" ></div>Look at the effect
Indeed, some students may feel strange after watching, why do you want to change the second div on an example
<div class= "C" style= "clear:left;" ></div>It didn't turn out that way.
In his humble opinion, the Clear:left property simply eliminates the effect of its left Div floating on itself, and does not change the performance of the left Div or even the parent container, in the parent container, three Div is also float, so the height is still collapsed. But we finally added a non-floating div, because it has the Clear:left property, so it will follow the left Div does not float to locate itself, that is, to navigate to the next row, and the parent container to see a non-floating, normal flow of child elements, will surround it, This caused by the way also the three floating elements also wrapped up the effect, height no longer collapsed (do not know to say understand no or this understanding is right, also hope to understand the students pointing).
Of course, in addition to adding Div, you can also add other HTML elements such as BR, the same principle, no longer repeat.
2.1.2 inserting elements using CSSThe above practice browser compatibility is good, but there is a big problem is to add content to the page to achieve the purpose of changing the effect, that is, data and performance confusion, since it is a monetization, see how to use CSS to solve the problem. The fundamental thing is to append the element to the parent container at the end, but we can do it using the following pseudo element of CSS.
Add a class Floatfix
. floatfix:after{ content: "."; Display:block; height:0; Visibility:hidden; Clear:left;}Add this class to the parent container
<div class= "P floatfix" > <div class= "C" >1</div> <div class= "C" >2</div> <div class= "C" >3</div></div>So we can see the right results.
As a simple explanation, after adding the Floatfix class to the parent container, an invisible block element is appended to it, and then set its clear property to left, similar to the principle just now.
Master 2.1.3Nicolas Gallagher offers a more refreshing look in a new micro Clearfix hack
. floatfix:after{ content: ""; display:table; Clear:both;}Nicolas Gallagher also has the original text: Before is to handle margin overlap, not listed in this article.
There's a homecoming. The above method looks good, but IE6, 7 does not support pseudo-elements how to do? That would require us to use the bfc/haslayout posture.
2.2causes the parent container to form BFCAfter a few days in the garden about the BFC of the bombing believe that we all have a certain understanding of BFC, not enjoyable classmates can see the Block Format CONTENT,BFC has three features
According to the definition of BFC, only the same belongs to a BFC, two elements can occur vertical margin overlap, this includes adjacent elements, nested elements, as long as they do not block (such as borders, non-empty content, padding, etc.) will occur margin overlap.
So to solve the margin overlap problem, as long as they are not the same BFC on the line, but for the two adjacent elements, the meaning is not significant, there is no need to add a shell, but for nested elements is necessary, as long as the parent element is set to BFC can be. This way the margin of the element does not overlap with the margin of the parent element.
We can use BFC's third feature to "clear the float", here actually said that the float is no longer appropriate, it should be said to contain floating. That is, as long as the parent container form BFC can, simply see how to form BFC
We can add these properties to the parent container to form BFC to achieve the "clear float" effect
2.2.1 uses float to form the parent container BFCSimply modify the code
<div class= "P" style= "float:left;" > <div class= "C" >1</div> <div class= "C" >2</div> <div class= "C" >3 </div></div>
So we can get the results.
We can see that the parent container height is not collapsed, but the length is shorter, because the div application float ' will change the length according to the content, this is useful in many cases, but we do not want to have this effect?
2.2.2 Other limitations of using BFCIt is mentioned above that using float with BFC will shorten the length of the parent container, and there is an important flaw--the parent container float solves its collapse problem, what about the parent container's parent container? Do you want to use Folat all the way (it does have this layout). BFC several ways have their own problems, the overflow attribute will affect the scrollbar and absolutely positioned elements, position will change the positioning of the element, which we do not want, display these methods still do not solve the problem of low version ie ...
It looks like the first way is better, but what about the low version of IE?
2.2.3 HaslayoutWe know that there is a haslayout concept in IE6, 7, many bugs are formally caused by haslayout, when the element's Haslayout attribute value is False, the element's size and position is controlled by the ancestor element that recently owns the layout. When the Haslayout property value of an element is true, it achieves a similar effect as BFC, which is responsible for the dimension setting and positioning of the element itself and its child elements. We can use craved in IE6, 7 to complete the float, first see how to make the element haslayout true
Using overflowin IE7: Hidden|scroll|auto can also make haslayout true
31 solutions with a relatively reliable solutionWe can come up with a relatively reliable solution after the above comparison.
Specifically, which method should be used to haslayout the element to true? Relatively zoom:1 is relatively good, because it will not cause other effects. Want to cause only in IE6, 7 on the use of some CSS effect, we also need some CSS hack knowledge, interested classmates can look at CSS hack, we can write such CSS
. floatfix{ *zoom:1;}. floatfix:after{ content: ""; display:table; Clear:both;}Although we have come up with a browser-compatible solution, but this does not mean that we have to use this way, many times our parent container itself needs position:absolute and other forms of BFC when we can directly use these properties, we have to master the principle, ingenious. All in all, clear the float two ways
CSS clear float processing (clear and BFC)
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
