visual formatting model (可视化格式模型）【持续修正】

an element in the normal flow that establishes a new block formatting context must not overlap the margin box of any floats in the same block formatting context as the element itself.

创建了一个新的BFC的块框的外边框边缘不允许与浮动框的外边距重合。

• • clear property  “清除”浮动

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

 和浮动在同一个BFC里的，挨着浮动的非绝对定位框，可以通过设置clear属性来让挨着自己的浮动框恢复正常(他的外边框边缘贴着浮动的外边缘)。

•  In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings)
• The containing block for a positioned box is established by the nearest positioned ancestor.（or, if none exists, the initial containing block）
  
• an absolutely positioned element (or its box) imply that the element's 'position' property has the value 'absolute' or 'fixed'

绝对定位框会根据离他最近的一个已定位（position:absolute/relative/fixed）的祖先包含框的内容区边缘的位置来定位，如果没有已定位的祖先框，就根据第一个包含框的位置来定位。

• • Fixed positioning

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

固定定位是绝对定位的一种特殊情况，即他的包含框永远都是视口。

1. 当display为none的时候，不会产生任何框。
2. 当设置了position:absolute/fixed时，float的值会被强制转换成none,一切行内框都会变成块框。也就是说，给一个行内级元素设置了绝对定位，他就会变成一个块，就可以设置他的宽度和高度和垂直的margin、padding了。
3. 当设置了float:left/right，一切行内框都会变成块框

• Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level
• The root element forms the root stacking context. Other stacking contexts are generated by any positioned element
• Within each stacking context, the following layers are painted in back-to-front order:

1. 1. the background and borders of the element forming the stacking context.
   2. the child stacking contexts with negative stack levels (most negative first).
   3. the in-flow, non-inline-level, non-positioned descendants.
   4. the non-positioned floats.
   5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
   6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
   7. the child stacking contexts with positive stack levels (least positive first).

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!