浮动
1.1浮动介绍
- 元素可以设置向左或者向右浮动(不会跳出父元素的宽)
- 元素浮动后，会脱离文档流(对后面的元素产生影响)
- 元素一旦浮动，会转换为块状元素
- 浮动的元素并不独占一行(但仍然是块状元素)，因为脱离标准文档流
- 浮动的元素，宽默认会使auto，被内容撑开
- 多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行
1.2浮动的影响
- 对后面元素的影响，后面元素会整体向前
- 对父元素有影响(父元素的高不能被浮动的元素撑开)
1.3消除浮动影响
- 消除元素对后面元素的影响，在后面的元素设置clear：both/left/right属性
- 消除子元素浮动对父元素的影响，给元素浮动或者设置overflow
定位布局
2.1 相对定位
- 通过position:relative设置元素为相对定位元素
- 元素设置为相对定位之后，不会脱离文档流，不影响其他元素
- 可以通过top/left/right/bottom给相对定位的元素设置位置
- 定位元素：根据原先默认的位置去定位
2.2 绝对定位
- 通过position:absolute来设置绝对定位
- 元素绝对定位后，脱离文档流，影响后面的元素，宽度默认会被内容撑开
- 可以通过left/top/right/bottom给绝对定位的元素设置位置
- 定位规则：根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素，祖先元素可以是任意类型的定位