The use of clear:bothclear float

1. 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.

The use of overflowclear float

In fact, the first time that can be used overflowto 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 hasLayoutplease 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

1. Prevent margin folding
2. Clear float
3. Will not surround floating elements #### Features of BFC
4. Form an independent space, be responsible for internal elements, and isolate the influence of internal elements on the outside world.
5. Behave normally to the outside world
6. Will not cover float elements, and adaptively occupy the remaining width of this line #### How to trigger BFC

• Use float, and the value is not none
• Use absolute positioning elements
• Use overflow, and the value is not visible
• Use display: table-cell/table-caption/inline-block
• Use position, and the value is not static/relative

Information Block Formatting Context In CSS About Block Formatting Context

The above information is explained, as long as the trigger BFC or hasLayoutcss property float can be cleared, and overflowthe reason is widely used, I think it should be that, in the BFC or trigger hasLayoutat the same time, the positioning of the element itself or the performance impact is limited.

The following is a use of overflowthe 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 overflowthe default value of visiblevalue other than auto hidden scrollcan clear the float. Of course, using the scrollwords of the scroll bar will always be displayed.

2. In use auto, or hiddenwhen 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 autowill always show scrollbars. (I don’t understand mac, I haven’t tested it)

4. For IE6, is provided overflowand can not be triggered hasLayout, (IE7 can!) It is necessary to set other attributes, such as zoom:1 width: 100%and the like.

The following are other methods that can clear floats, but they have great limitations or compatibility issues, so they are not commonly used

1. Let the parent of the floating element also float, float:leftorfloat:right
2. Add for the parent of the floating elementdisplay:inline-block
3. Add for the parent of the floating elementposition:absolute

It is not difficult to see that the purpose of the above methods is to trigger BFC or hasLayout.

summary

From the perspective of various books and articles, the clearing of floats mainly starts from the following two ideas:

1. Use of clearproperty
2. Trigger BFC or hasLayout

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~

• Next function curry (Haskell Curry)

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');