CSS | 文档流 | Box盒模型 | FC BFC、IFC、FFC、GFC

文档流

“在一个块格式区域中,盒子会从包含块的顶部开始,按序垂直排列(受书写模式影响)。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中,每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序,则盒子的右外边缘与包含块右边缘重合)。”

“在内联格式区域中,盒子会从包含块的顶部开始,按序水平排列(受书写模式影响)。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对其,或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。”

脱离文档流

float 或者 position:absolute / fixed 可以让元素脱离文档流

脱离常规流的元素会创建一个新的块级格式化上下文(Block Formatting Context: BFC)环境

注:float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围(可以说是部分无视)

溢出

overflow
text-overflow

Box 盒模型

MDN 盒模型

你可能感兴趣的:(#,CSS,css,前端)