盒子常规流和浮动基础

块盒在常规流下的位置

• 盒子在包含块的垂直方向上摆放
• 依次摆放：按照HTML元素的书写顺序从上到下摆放
• 盒子在包含块中占据的尺寸是整个盒子的尺寸
• 垂直方向上若两个外边相邻，则进行合并（折叠）
• 垂直方向：水平方向上外边距不会合并
• 外边距相距：两个外边距之间没有border、padding和content
• 合并：均正取大，均负取小，一正一负相加

盒模型中的auto值-水平方向

常规流盒子水平方向上的尺寸，必须等于包含块的宽度

垂直方向

margin为auto：0px

height为auto：适应内容的高度

浮动

当元素属性取值为left、right时，元素属于浮动定位。

     float：不继承
            默认值为none
            取值none（不动）left（左浮动）right（右浮动）

盒子位置

右浮动 先向上再向右

左浮动 先向上再向左

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

原文地址：https://www.cnblogs.com/liuyizhou/p/9222209.html