Floating and positioning
float
What is floating?
Float means floating elements provided attributes may control standards from the normal stream, the process moves to the parent element in the specified position. It allows any line box may be arranged to float with the layout.
In the css, defined by the floating float property, the basic syntax is as follows:
选择器{float:属性值;}| Property Value | description |
|---|---|
| left | Left-floating element |
| right | Elements float right |
| none | Elements do not float (default) |
Floating properties
From the standard flow, not accounting for the location, only about floating float
As long as a general concept of floating creates a block-level inclusion, generally add a parent box on the outside, and then aligned, but does not exceed its padding
If a floating element will be aligned with the top, if the flow is a standard element is arranged vertically
Objective: To make a plurality of block elements may be displayed in a row
Clear float
Why remove floating?
Because floated elements do not take up the position of the original document stream fish, so it will affect the layout elements behind, in order to solve these problems, then you must remove the floating element
Accurate, but not a clear impact float after float clear result
Clear float its nature
Clear float in order to solve the main elements of the parent because the child floating height caused internal problems 0
Father did not give the height of the box will not be softened box
Method:
First, in the css, Clear Clear float attribute which syntax is:
选择器{clear:属性值;}| Property Value | description |
|---|---|
| left | Floating elements are not allowed on the left side (left side scavenging floating) |
| right | Does not allow floating elements on the right side (right side scavenging floating) |
| both | Effect clears both the right and left floating |
Second, additional label
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>，或则其他标签br等亦可。Add many meaningless label, structured poor, not recommended
Third, the parent method to add the overflow property
Triggered by BFC, clear floating effect can be achieved
给父级添加： overflow为 hidden|auto|scroll 都可以实现Advantages: concise code
⭐️ Disadvantages: easily lead to an increase in the content of the time would not lead to wrap content to be hidden away, can not display elements need to overflow.
The following two is not clear
The use of clear float after pseudo-element
: after method is an upgraded version of an empty element, the benefits are not individually labeled a
How to use:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */Advantages: in line with the closed floating structure thought correct semantics
Disadvantages: As IE6-7 does not support: after, use zoom: 1 trigger hasLayout.
Representatives Web site: Baidu, Taobao, Netease,
Note: content: "." Inside as much as possible with a small point or other, try not to be empty, otherwise the firefox versions prior to 7.0 will generate a space.
Fifth, the use of double dummy elements before and after the floating Clear
How to use:
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}Pros: code more concise
Disadvantages: As IE6-7 does not support: after, use zoom: 1 trigger hasLayout.
Representatives Web site: millet, Tencent, etc.
Locate
Element attributes include positioning a positioning mode and a two offset edge portions
Edge Bias
| Edge offset properties | description |
|---|---|
| top | Top offset with respect to the definition of the element of the parent element from the edge |
| bottom | Bottom offsets, defined distance relative to the element under the edge of the parent element |
| left | Left offset, with respect to the definition of the element from the left edge of its parent element |
| right | Right offset, the element is defined with respect to the right from their parent line |
That side after positioning mode and offset to match with such top: 100px; left: 30px; etc.
Positioning mode
In CSS, position attribute to define elements for positioning mode, the basic syntax is as follows:
选择器{position:属性值;}Common position property of
| value | description |
|---|---|
| static | Automatic positioning (default targeting) |
| relative | Relative positioning with respect to its original position for positioning the document flow |
| absolute | Absolute positioning, relative to its parent has been located on a position elements |
| fixed | Fixedly positioned relative to the browser window to locate |
Here to expand understanding of their mode
Relative positioning relative:
The relative positioning of the elements is positioned relative to the standard position of the stream, when the value of the position property is relative, the elements can be positioned opposite
Although it can change its position, but it still remains in the position of the document flow
note:
- Relative positioning the most important point is that it can be offset by moving the position of the edge, but the position occupied by the original, continue to occupy.
- Secondly, each time moving the position of the upper left corner is the base point their mobile (relative to position themselves to move)
If the main purpose is to allow multiple floating block-level elements of his show, the main value is the mobile positioning position, let the box to the position we want to go.
Absolute positioning absolute
Absolute positioning is achieved by the edge offset, it is completely off the scale, completely occupies the position /
First, if a parent element are not aligned with the positioning places subject browser
Second, absolute positioning is based on recent element has been positioned (absolute, fixed or relative positioning) of the parent element (ancestor) positioning.
Zaijuefuxiang
This is our learning targeted formulas, always remember
The following conclusions:
1, because the child is absolute positioning, does not occupy the position, it can be placed anywhere father inside the box.
2, when the parent box layout, you need to occupy the position, so the father can only be relative positioning.
This is the origin of the child must parent phase.
Absolute positioning center box (horizontal / vertical)
1, the first left: 50%; half the size of the parent box
2, and then their own half of the value of negative margins can be margin-left
Fixed positioning fixed
When the elements set a fixed position, it will spin out of control standard document flow, and always to define your own display position according to the browser window. Regardless of the browser scroll bar to scroll regardless of how the size of the browser window changes, the element will always display a fixed position in the browser window
The following versions of IE6 and other browsers do not support fixed positioning
Z-index to Order
For example: z-index: 2;
note:
- Default attribute values z-index is 0, the larger the value, the element is positioned in the laminated element on the home.
- If the values are the same, in accordance with the writing order from behind.
- Behind the numbers must not be added to the unit.
- Only the relative positioning, absolute positioning, fixed positioning has this property, the rest of the standard flow, floating, static positioning are no such properties, also can not specify this property.
Positioning mode conversion
Like after floating element adds absolutely positioned and fixed positioning element mode conversion will occur, it is converted to inline block mode,
Thus, for example, if the line element is added after floating the absolute positioning or fixed positioning, mode conversion can not, directly to the can height and width