Learning experience of css float_html/css_WEB-ITnose

Detailed explanation of css float

@(css float)[hasLayout|clear float|Miaotong]

The definition and usage of css float

float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.

If floating non-replaced elements, specify an explicit width; otherwise, they are made as narrow as possible.

Note: If there is very little space for a floating element on a row, then the element will jump to the next row, and this process will continue until a certain row has enough space.

默认值：none；继承性：no；版本：CSS1JavaScript 语法：object.style.cssFloat="left"；

Possible values

值						描述left					元素向左浮动。right					元素向右浮动。none					默认值。元素不浮动，并显示在其在文本中出现的位置。inherit					规定应该从父元素继承 float 属性的值。

Simple example

float:left is used here ;We float the ul element and a element to the left.

clear float

What is clear float? Many people are used to translating clear float as "clear float". I think that in view of the problems caused by float, what we need to do is to understand the impact of float, not just clear float, but also Include closed floats so that floats do not affect other elements.

Why do we need to clear float?The reason why we need to clear float is not that we are unhappy with float, but that in some cases, float causes Problems with our layout forced us to clear the impact of float. Listed below are some layout problems caused by float and the clear float method:
The code and renderings are as follows:

The above examples show that if the inner div floats , then when the height, padding, and margin are not set for the parent div, the height of the parent is 0, and we know that the height of the parent container can be expanded by the height of the inner content. This is the height collapse caused by float. question.

What if we set the height of the parent container?

The code and renderings are as follows:



We found that when setting the height of the parent container, the height is not 0, but 200px set for us;

What if we set margin and padding to the parent container?

The code and renderings are as follows:

The above example shows that if we do not set the height of the parent div and only set padding and margin, as shown in the renderings, the actual The height of the top is equal to the top and bottom borders, plus the top and bottom padding, plus margin. However, the height of the content is still 0, and the height collapses due to float.

In this case, the clear float method is as follows:

Method 1: Add a new element tag and apply clear: both; The code and renderings are as follows:

The above example shows that when clear: both is used; the height of the parent div is expanded by the height of the child layer, and the height of the content becomes 50px; and padding, Margins are not affected. The advantages and disadvantages of this method are as follows:

Advantages : Easy to learn, easy to use, and easy to master.

Disadvantages: It does not comply with the separation of structure and performance, adds a lot of useless tags, and is inconvenient for later maintenance, so it is not recommended to use.

Method 2: Parent div defines overflow:auto/hidden; (the parent div here refers to div#wrap)The code and renderings are as follows:

The above example shows that the effect can also be achieved through method two. The height of the content has also changed to 50px, and padding and margin are not affected.

Principle: Block Formatting Context (block-level formatting context) is a concept in the W3C CSS 2.1 specification, which determines how an element positions its content and interacts with it. Relationships and interactions with other elements.

In the element where Block Formatting Context is created, its child elements will be placed one after another. Their vertical starting point is the top of a containing block, and the vertical distance between two adjacent elements depends on the 'margin' attribute. The vertical margins of adjacent block-level elements in a Block Formatting Context collapse.

The use of BFC:

Non-BFC elements will ignore the height value of their child elements that add float; their top and bottom margins will be the same as those of the child elements. The margins are collapsed; its inner and outer float elements will affect the layout of itself and its sub-elements.

Triggering BFC is an effective way to solve these three problems. This is why overflow:hidden/auto can be used to clear problems such as floating.

Conditions for triggering BFC :

The value of "float" is not "none"

The value of "overflow" is not The value of "visible"
"display" is "table-cell"
"table-caption", or the value of "inline-block"
"position" is neither "static" nor "relative"

Therefore, when using the overflow attribute to clear floats, please note that the overflow attribute has three attribute values: hidden, auto, visible, scroll, and inherit. We can use hidden and auto values ​​to clear floats, but we cannot use visible values. This value will not achieve the effect of clearing floats. Both atuo and hidden values ​​are ok, and hasLayout needs to be triggered in IE6, such as zoom: 1;
The advantages and disadvantages of using the overflow:auto; method are as follows:

Advantages: It conforms to the separation of structure and performance, and the amount of code is very small.

Disadvantages: After multiple nestings, firefox may cause all content to be selected in some cases, so it is not recommended.
The advantages and disadvantages of using the overflow:hidden; method are as follows:

Advantages: It conforms to the separation of structure and performance, and the amount of code is very small.

Disadvantages: When the content increases, it is easy to cause the content to not wrap automatically, causing the content to be hidden, and elements that need to overflow cannot be displayed, which affects the layout and is not recommended.

Method 3: The parent element is also set to float
The code and effect are as follows:

Advantages: Comply with the structure Separated from performance, the amount of code is very small.

Disadvantage: The layout of elements adjacent to the parent element will be affected. Keep looking for the parent container to float, looking up layer by layer. It is not recommended. And it conflicts with margin:0 auto; horizontal centering.
Method 4: Use the br tag (clear="all" in br)
This method is somewhat niche, br has the clear="all | left | right | none" attribute;
The code and effect are as follows:

Advantages: It has slightly stronger semantics than the empty tag method and less code

Disadvantages: But it is also not semantic and violates the separation of structure and performance. It is recommended not to use.
Method 5: Set display:table on the parent element; or set display:inline-block;
The code and effect are as follows:

Advantages: The structural semantics are completely correct, and the amount of code is very small

Disadvantages: display: table ;The box model properties have been changed, causing a series of problems. Not recommended. display:inline-block;cannot set margin:0 auto;

Method 5: Use:after pseudo-element
It should be noted that:after is a pseudo-element (Pseudo-Element) , not a pseudo class (called a "pseudo object" in some CSS manuals).
Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.
This method is derived from: How To Clear Floats Without Structural Markup http://snipplr.com/view/86/clear-floats-without-structural-markup/
The code and results are as follows:

Advantages: The structure and semantics are completely correct, and the code size is centered.

Disadvantages: Improper reuse will increase the amount of code. The
style can also be written like this:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac /


Due to the low market share of IE/Mac, it can be simplified to:
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { zoom:1; }
The code and renderings are as follows ：



where clear:both; refers to clearing all floats; content: '.'; display:block; is indispensable for FF/chrome/opera/IE8, and content() can be taken The value can also be empty. The function of visibility:hidden; is to allow the browser to render it but not display it, so that the float can be cleared.
When writing HTML code, I found that in Firefox and other browsers that comply with W3C standards, if there is a DIV as an external container, and the internal DIV has a float style set, the external container DIV will not clear internally, resulting in Can't be stretched open.
This clearfix CSS uses the after pseudo-object, which will add the content in content at the end of the element to which clearfix is ​​applied. A period "." is added here, and its display is set to block; the height is set to 0; clear is set to both; and visibility is set to hidden. This achieves the purpose of opening the container. Explain here:
CSS content attribute

Definition and usage
content attribute and :before and :after pseudo-elements Used together to insert generated content.
Description
This attribute is used to define generated content placed before or after the element. By default, this is often inline content, but the type of box this content creates can be controlled using the display attribute.

Default: normal
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.content="url(beep.wav)"

Value
none
normal
content specifications
inherit specifies that the value of the content attribute should be inherited from the parent element.

For details, please refer to the link: http://www.w3school.com.cn/cssref/pr_gen_content.asp

Conclusion

This article involves hasLayout, BFC, etc. Due to the limited level, I will not talk about them one by one here. I will discuss them in another article after research.
That’s it for today. If there are any mistakes, please point them out. Thank you! -----Miaotong