Float float
In this case related to the formation of BFC
-
Float, float value other than none of
-
Absolutely positioned elements, position as absolute / fixed.
-
wherein the display is one of the following values inline-blocks, table, table-cell, table-caption.
-
In addition to the visible overflow value (hidden, auto, scroll).
-
fieldset element
display: flow-root;
To float in the flow-root parent display property.
Or will be affected by the positioning property.
// 清理浮动
.parent {
overflow: scroll; // hidden;
clear: both;
}
// 浮动兼容性处理
.wrapper{
display: flow-root;
}
@supports not (display:flow-root) {
.wrapper::after {
content: '';
display: table;
clear:both;
}
}
display unusual properties
- flow-root
It always establishes a new block formatting context for its contents. 官方解释display设置为这个属性会得到一个BFC空间，空间内类似一个Block块。- table-caption
as the title of the table shows, unusual commonly used, can caption-side: bottom define the special nature of the layout! .
- contents
Div style rules the element does not produce any bounding box
label background, padding, margin, border parts are not rendering, font and color attributes the foundation!
inline-block gap problem will appear
cause
Invisible symbol between inline-blcok blocks are reserved 1/3 the font size of the parent layer space
Solution about 5:
- Parent font-size is set to 0
- float float
- Set a negative margin -.3333em
- Label notation does not branch
- letter-spacing: negative values -.3333em;