[Go] clean up the floating family

Original address: http://www.jb51.net/css/67471.html

Original address: http://www.twinsenliang.net/skill/20090413.html

When it comes to clear floating, the most direct response is Clear:both this CSS property, but also for why do not use this attribute and doubts, as to clear floating behind the principle, has been in the state of ignorance, finally determined to understand ~ Check the information, and then to verify the ~ ~ then began

1, the concept of distinction:

1) Clear float: Clears the corresponding word is clear, corresponding to the property in the CSS is Clear:left | Right | both | None
2) Closed float: The more precise implication is that the floating element is closed, thereby reducing the impact of the float.

The effect we want to achieve is more precisely a closed float, rather than simply clearing the float, setting the Clear:both clear float on the parent element does not solve the problem of a height collapse.

2. Why to clear the float:

Positioning mechanism in CSS: normal flow, floating, absolute positioning (where "position:fixed" is a subclass of "Position:absolute")

The child element floats floating above the ordinary stream, like a cloud, but only left and right floating, the parent element does not exist in other ordinary flow elements, it will be shown as the height of 0

To clear floating methods:

　　　　

We have a rough look at the way to clear the float how many (ie inside with zoom:1 will not write, the next topic again write). The corresponding demo

1. Pseudo-class layer cleanup using Pseudo-class: post-subsequent null height-level zero
2. Use CSS Overflow:auto to support high
3. Using CSS Overflow:hidden to create weird adaptations
4. Using Display:table to turn an object into a table Form
5. Use div tags, and the clear properties of CSS
6. Use the BR tag, and the clear property of CSS
7. Use the BR tag, and the clear property of its own HTML

At a glance, they can solve the problem, but on the other hand they have their own pros and cons. (one by one corresponds)

1. The advantage structure is semantically correct and does not produce the rest of the weird questions.

   The defect reuse method is apt to cause the code quantity to increase sharply.

   It is recommended that the outermost light float be used, or a clear modular multiplexing method is used.

2. The advantage structure is completely semantically correct and the code is very small.

   After multiple nesting, clicking on the outermost light floating box will be the outermost to the topmost Content selection (FF), or the outermost module will have a scroll bar (IE) when the mouseover causes width change.

   It is recommended to use the inner module, do not nest.

3. The advantage structure is completely semantically correct and the code is very small.

   When the content increases, it is very easy not to wrap and the content is hidden.

   It is recommended to use when width is fixed, do not nest.

4. The advantage structure is completely semantically correct and the code is very small.

   The properties of the defective box model have been changed, so it is conceivable that the singular event is more natural than you can count.

   It is recommended that you do not use the bug if you do not want to change it, but it can be used as a temporary test in the alpha version.

5. The Code of Merit is very small and the reusability is very high.

   Shortcomings can not be perfect to adapt to the semantic, not conducive to revision and changes in demand.

   Recommended for beginners, it allows you to quickly solve floating problems.

6. The advantages are more semantic than the 5th case, the code is very small and the reusability is very high.

   The shortcomings of semantics are still imperfect, not conducive to revision and demand changes.

   Recommended for beginners, it allows you to quickly solve floating problems.

7. The advantages are more semantic than the 5th and 6 cases, the code quantity is the least, the reusability is very high.

   The shortcomings of semantics are still imperfect, not conducive to revision and demand changes.

   Recommended to guide Beginners thinking upgrade use, let it understand with its use ClassName to control a performance, rather than return to the WEB1.0 era of the Web page directly with HTML attributes to control performance, after all, the latter's code volume is less.

Best way to clear float:

. clearfix:after {content: "."; display:block; height:0; visibility:hidden; clear:both;}
. clearfix {*zoom:1;}

: Before pseudo-element is used to handle margin overlap

[Go] clean up the floating family