auto和float的作用及使用场景
一、margin: 0 auto; 里的 auto
✅ 作用
margin 中的 auto 是水平居中的专用写法，它会让浏览器自动分配元素左右的外边距，让元素在父容器里水平居中。
✅ 使用场景
给块级元素（比如 div）设置固定宽度后，想让它在父容器里水平居中时用。
auto 只对水平方向有效，垂直方向用 auto 无法实现居中。
元素必须是块级元素，且设置了明确的 width（固定宽度），auto 才会生效。
二、float: left;
✅ 作用
float 是浮动布局属性，它会让元素脱离正常的文档流，向左 / 向右 “漂浮”，实现文字环绕、多栏并排的效果。
✅ 常见值
float: left;：元素向左浮动，后面的元素会靠上来排在它右边。
float: right;：元素向右浮动，后面的元素会靠上来排在它左边。
float: none;：默认值，不浮动。
✅ 使用场景
实现多栏布局
关于父级塌陷及其解决方法
一、父级塌陷是什么？
父元素的高度本来应该被里面的子元素撑起来，结果父元素高度变成 0，像塌掉了一样，这就叫父级高度塌陷。
二、出现塌陷的根本原因
只有一句话：
父元素没有设置固定高度，且子元素设置了 float（浮动）
详细解释：
浮动（float: left / right）会让子元素脱离正常文档流
正常文档流的父元素感知不到浮动子元素的存在
父元素没有自己的高度，又 “看不见” 子元素 → 高度变成 0 → 塌陷
三、用 overflow 修复塌陷的方法
** overflow: hidden**;
四、为什么 overflow: hidden 能解决？
核心原理：
overflow 不为 visible 时，会触发 BFC（块级格式化上下文）
BFC 的规则之一：BFC 会包裹住内部所有元素，包括浮动元素。
所以：
给父元素加 overflow: hidden → 父元素变成 BFC
BFC 强制父元素 “看见” 浮动子元素
父元素重新被撑开 → 塌陷消失
本周上课tips:
图片插入方法
1.在
2.backgroung-image:url("index_01.jpg")
