The magic of H5 is that it's unpredictable, then I want to talk about my positioning floating awareness.
What is the float
must first understand what is floating: from the document flow, the default move to set direction in the current row (the default horizontal).
With floating can solve any problem
before we are to understand the use of floating floating can solve any problem: for example, we want to put a row of div or img, we can solve it by property debugging margin and the like, but sometimes find that even so sometimes still a void, we will be able to solve this problem by floating. Another example sometimes we need some labels do not occupy display document flow, this time you can also choose to use.
Floating what problems will arise
but float often have some problems: such as: Floating custom wrap, float collapsed, floating cover.
Custom Wrap: such floating is often encountered in the wrap or the other to a predetermined edge of the slider will
float collapse: Because the floating departing flow can be see from the document does not take up a position, length and width so that it will lead to reduction of the parent element small. Results in a parent child elements beyond element
floating cover: departing from the reason but also because of the normal flow, with the same level of the slider block elements overlap.
How to remove floating
so we must learn to clear the float, clear float is to solve the above problem, some solution is to set up properties by block to float outside, some clear float, although both effects may be the same, but the former maintenance and writing performance is really not very friendly, so I mainly write the latter.
5 to the end of the slider and provided on an empty div clear: both properties.
The principle is to calculate the height of the float element is not in the normal stream, have clear property div in normal flow, the "automatic" increase in margins (margin-top) to achieve the expansion of the parent element
6 to the slider the elements plus a pseudo-class and after setting block and Clear: both.
7. the parent element to the floating vessel plus overflow: hidden.
What is positioning?
Positioning position, the edge offset and positioning mode components.
Edge offset, four, namely, top, bottom, left, right:% can be followed, and the like may also px.
Key note about positioning mode: relative positioning, absolute positioning, fixed positioning.
Relative positioning relative: each move all own point of reference moving the upper left; occupies its original position.
Absolute positioning absolute: moving position offset by an edge, but it is completely off the mark, is not completely occupy positions. 1. No parent element positioning, the children absolutely positioned elements of the current screen to the browser prevail; 2. parent element positioning, the children absolutely positioned elements already positioned at the nearest (relative, absolute fixing) the parent element is positioned.
Fixed positioning fixed: nothing to do with the parent element, with only about browsing; fixed positioning is completely off the mark, not the location.
Well, that's my perception of floating and positioning.