clear:both
clear float1. clear:both
+ extra tags
`<div class="clear"></div>` Put the above div inside the parent of the floating element ``` css .clear1 { display:block;/* Clear is invalid for inline elements*/ clear:both; /* The following attributes are estimated to avoid the impact of text or image content displayed in the label*/ line-height:0; font-size:0; height:0; overflow:hidden;} ``` **Disadvantages**: To add extra meaningless tags
2. clear:both
+ pseudo-class
Similarly, adding the name of this class to the parent of the floating element is 1.
compared with the pseudo-class div
, and it feels that the essence has not changed.
.Clear2:after{ content:'.'; display:block; height:0; clear:both; overflow:hidden; visibility:hidden; } /*Pseudo-classes are not recognized in IE67*/ /*IE67 is cleared because of using zoom:1 to trigger hasLayout*/ .Clear2 {zoom:1;}
ps. If the parent of the floating element has a width value (not auto) under IE67, there is no need to clear the floating. Because the width has triggered haslayout.
overflow
clear floatIn fact, the first time that can be used overflow
to clear the floating (in fact, I was rejected), there is a very magical feeling, why can clear float? ! And such questions have also been asked as interview questions.
The reason is that it overflow(非visible值)
can trigger BFC (Block Formatting Context) or IE67 hasLayout
, which changes the way of formatting.
Then the question comes again, what is BFC and what is hasLayout
?
About hasLayout
please poke here , to explain very clearly.
#### What is BFC BFC (Block Formatting Context) literally translated as "block-level formatting range", is a concept in the W3C CSS 2.1 specification, which determines how an element locates its content and its relationship with other elements And interaction. #### Several Uses of BFC
Information Block Formatting Context In CSS About Block Formatting Context
The above information is explained, as long as the trigger BFC or hasLayout
css property float can be cleared, and overflow
the reason is widely used, I think it should be that, in the BFC or trigger hasLayout
at the same time, the positioning of the element itself or the performance impact is limited.
The following is a use of overflow
the difference when several attribute values to clear the float, between them.
Reference: http://www.quirksmode.org/css/clearing.html
.container{ border: 1px solid #ccc; overflow: auto; width: 100%; }
The above is used overflow:auto
, the following points are worth our attention:
1. Use in addition to overflow
the default value of visible
value other than auto
hidden
scroll
can clear the float. Of course, using the scroll
words of the scroll bar will always be displayed.
2. In use auto
, or hidden
when required to ensure the height of the container is adaptive (i.e., not explicitly defined height); in addition the total width of the width of the floating element should always be less than the container. Otherwise, while clearing the float, it will bring another problem: the content beyond the container will be "cut" off, or scroll bars will appear.
3. In Explorer Mac, the settings auto
will always show scrollbars. (I don’t understand mac, I haven’t tested it)
4. For IE6, is provided overflow
and can not be triggered hasLayout
, (IE7 can!) It is necessary to set other attributes, such as zoom:1
width: 100%
and the like.
float:left
orfloat:right
display:inline-block
position:absolute
It is not difficult to see that the purpose of the above methods is to trigger BFC or hasLayout
.
From the perspective of various books and articles, the clearing of floats mainly starts from the following two ideas:
clear
propertyhasLayout
The above is a summary of the thoughts on clearing up the data that I have seen recently. If the understanding is wrong, I hope to point it out~
var gitalk = new Gitalk({ clientID: '82f3fb6574634b43d203', clientSecret: '5790d9fdbfe9340d29810b694b3b2070a9a3b492', repo:'zfengqi.github.io', owner:'zfengqi', admin: ['zfengqi'], id: winMode: true .loc.pathname, }); gitalk.render('gitalk-container');