Summary of floating knowledge and floating knowledge

Summary of floating knowledge and floating knowledge
The most important thing about floating is to solve the compatibility problem of floating in IE6 and 7. For example, bilateral distance bug and gaps in the image. We will summarize the compatibility issues brought about by the positioning process later ~~~ Block features

1. Exclusive row by default

2. When there is no width, a row is filled by default (that is, the parent element has multiple widths, which means multiple widths)

3. supports all css commands

Features of intra-row Elements

1. The same row can continue with similar labels

2. Open the content

3. width and height are not supported (that is, writing a high value of width is useless ~)

4. There is a problem with the upper and lower margin and padding (upper and lower margin are not supported, which does not play a practical role in the upper and lower settings of padding. Will not squeeze out the upper and lower elements)

5. The line feed is parsed into a space.

Features and problems of inline-block

1. Display in one row

2. inline elements support width and height

3. When there is no width, the default content is opened.

4. The line break gap between labels is parsed into spaces (both block elements and inline elements will be parsed)

5. IE6/7 does not support the inline-block of block attribute labels.

Floating means that the elements are moved out of the Document Stream in the specified direction. When a parent boundary or adjacent floating element is reached, it stops.

Elements after float have the following features: 1. blocks are displayed in a row; 2. inline elements support width and height; 3. When block elements or Inline elements have no width, the default content opens the width. 4. The content is out of the Document Stream. (try to clear the float ~~) 5. upgrade to a half-layer level

How to clear the float?

1. Add height to the parent level. However, the page height value is generally obtained based on the height of the child element, so the scalability is poor and is generally not used. 2. Add float to all parent classes. However, it will automatically expire around margin.

3. Add display: inline-block to the parent level. Problem: About margin auto expiration

4. Add an empty tag <div class = "clear"> </div>

Problem: IE6 has a minimum height of 19px. (There is a 2px deviation in IE6 after resolution.) in IE6, elements with a height smaller than 19px are treated as 19px ~

5. Add <br> clear floating. However, this method does not meet the separation requirements of structure, style, and behavior. 6. after pseudo-class Floating Method (currently the mainstream method)

. Clear: after {content: ''; display: block; clear: both;} must be a block.

. Clear {zoom: 1 ;}

Where:

After pseudo-class: add content at the end of the element;: after {content "added content";} IE6, incompatible under 7, but in IE6 and 7, float elements do not need to be float if their parent class has a width!

Zoom: 1; is used to trigger haslayout under IE, so that the width and height of the element are calculated based on its own content. However, FF does not support 7. overflow: The hidden Floating Method;

Overflow has the characteristics of floating elements! However, it is incompatible with IE6 and does not contain floating elements in IE6, that is, IE6 does not have the characteristics of package elements.

Problem: IE6 must be compatible with width or zoom: 1. (if the parent element has a border, the write width will set the corresponding width for the parent element, and write zoom: 1. The border will wrap the width of the entire page)