clearfix:after[usage]_html/css_WEB-ITnose

css browser html

Why can’t I use

.clear{clear:both}

directly? I hope you can post the detailed usage of HTML CSS, such as which browser

.clear{clear:both}

is incompatible

again Can you post the detailed usage of .clearfix:after and .clearfix that are compatible with various browser generations of HTML and CSS?

Urgent need... I hope friends who have a deep understanding of clear floating can solve this question for me

Reply to discussion (solution)

The clear attribute specifies which side of the element does not allow other floating elements.
Description
The clear attribute defines which side of the element is not allowed to have floating elements. In CSS1 and CSS2, this is achieved by automatically adding a top margin to clear elements (i.e. elements with the clear attribute set). In CSS2.1, clear space is added above the upper margin of the element, but the margin itself does not change. Regardless of the change, the end result is the same. If it is declared as left or right clear, the upper border of the element will be just below the lower margin of the floating element on that side.
Default value: none
Inheritance: no
Version: CSS1
JavaScript syntax: object.style.clear="left"
Example
Both the left and right sides of the image Floating elements are not allowed:
img
{
float:left;
clear:both;
}


The clear attribute specifies which side of the element is not Allow other floating elements.
Description
The clear attribute defines which side of the element is not allowed to have floating elements. In CSS1 and CSS2, this is achieved by automatically adding a top margin to clear elements (i.e. elements with the clear attribute set). In CSS2.1, clear space is added above the upper margin of the element, but the margin itself does not change. Regardless of the change, the end result is the same. If it is declared as left or right clear, the upper border of the element will be just below the lower margin of the floating element on that side.
Default value: none
Inheritance: no
Version: CSS1
JavaScript syntax: object.style.clear="left"
Example
Both the left and right sides of the image Floating elements are not allowed:
img
{
float:left;
clear:both;
}

.clearfix:after can be supported when the child node is float Open the parent node

First of all, the principle of clearing floats is actually to leave enough vertical margins for elements to float.

<div >   <div style="float:left"></div></div>

This effect is that the outer div will not contain the inner div. Because floated elements are detached from the original document flow.
Take the above example as an example: Generally speaking, there are three ways to clear floats
. First: Let the outer elements also float, for example:

<div style="float:left" >   <div style="float:left"></div></div>

Then add the clear: both effect to elements other than this element.
Second: Add an element to the end of the outer div and use this element to float clearly.
Specific usage:

<div style="clearfix" >   <div style="float:left"></div></div>.clearfix:atfer{content:".";display:block;visibility:hidden;height:0;clear:both;}

.clearfix{display:inline-block}
.clearfix{display:block}
The last two are set for compatibility with other browsers . Because: after is not supported by all browsers.
Third: Use the overflow attribute

<div style="overflow:hidden" >   <div style="float:left"></div></div>

Thank you...I finally understand...