盒子常规流和浮动基础
Posted liuyizhou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒子常规流和浮动基础相关的知识，希望对你有一定的参考价值。
块盒在常规流下的位置
- 盒子在包含块的垂直方向上摆放
- 依次摆放：按照html元素的书写顺序从上到下摆放
-
盒子在包含块中占据的尺寸是整个盒子的尺寸
-
垂直方向上若两个外边相邻，则进行合并（折叠）
- 垂直方向：水平方向上外边距不会合并
-
外边距相距：两个外边距之间没有border、padding和content
-
合并：均正取大，均负取小，一正一负相加
盒模型中的auto值-水平方向
常规流盒子水平方向上的尺寸，必须等于包含块的宽度
垂直方向
margin为auto：0px
height为auto：适应内容的高度
浮动
当元素属性取值为left、right时，元素属于浮动定位。
float：不继承
默认值为none
取值none（不动）left（左浮动）right（右浮动）
盒子位置
右浮动 先向上再向右
左浮动 先向上再向左
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
以上是关于盒子常规流和浮动基础的主要内容，如果未能解决你的问题，请参考以下文章