CSS2中盒子模型和布局的一些概念关系

CSS的一些名词和概念，用来帮助你更清楚地描述HTML/CSS世界中的事物。box在CSS中，一个元素可以看作是一个盒子。具体可以参考盒模型的解释，这里不再展开。包含块Box的位置和大小是根据称为包含块的边界计算的。块级元素和块盒块级元素一般是指HTML中特定类型的元素，如div、p、ul等。块盒是指构成块格式化上下文的盒。可以确定，正常的块级（不改变其位置、显示等默认属性值）可以构成一个BFC。但是，如果元素的display属性值为'block'、'list-item'或'table'之一，它也可以在外部显示块级元素的行为。它也将成为一个块框。BFC(Blockformattingcontexts)什么情况下会生成一个BFC：根元素float元素（float属性不是none）显示：block,table-cell,table-captain,list-item,table,table-row,table-row-group,table-header-group,table-footer-groupposition都是绝对元素（absolutepositioning）overflow不等于BFC中的visibleflex元素grid元素，形成一个独立的布局环境，里面元素的布局位置不会受外界因素影响。IFC（Inlineformattingcontexts）对应BFC，一个inline元素默认也形成一个IFC（inlineformattingcontext）。IFC有一个不同于常识的特点：当行内级框的宽度大于父容器的宽度时，会被拆分成多个行内级框；当属性方向为ltr时，margin/border/padding-left将作用于第一个行内级框，margin/border/padding-right将作用于最后一个行内级框；如果属性direction为rtl，margin/border/padding-right作用于第一个inline级框，margin/border/padding-left作用于最后一个inline级框；内联框是内联级的，其内容参与包含内联格式化上下文。“显示”值为“内联”的非替换元素会生成一个内联框。不是行内框的行内级框（例如替换的行内级元素、行内块元素和行内表元素）被称为原子行内级框，因为它们参与了它们的行内格式化上下文作为一个不透明的盒子。after

注意例子中content元素首尾的外边距在CSS2中，一个box通常有三种定位方式:普通流：普通文档流由BFC、IFC和位置相对的blockboxes或inlineboxes组成。float属性值不等于none的元素通常称为浮动元素。绝对定位绝对定位的元素完全脱离了正常的文档流，它的位置不会影响它后面元素的位置。定位元素position属性值不是static的元素称为定位元素。display、position、float的相对关系我们知道display、position、float都会对元素的布局位置表现产生影响。那么三者如何协同工作呢？如果显示：无；position和float将不再有任何影响；如果position属性是absolute或者fixed，那么float属性会被设置为none（可以理解为不再有float行为，即使手动设置float也不是none），display行为按照规则显示在下表中；元素的定位是根据top/right/bottom/left计算的。如果float属性的值不为none，display属性会按照下表的规则显示；如果该元素是根元素，则按照下表的规则显示。其他情况下，按照显示设置的值处理指定值。最终显示值是inline-tabletableinline,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption,inline-blockblockothers与指定值相同