二、浮动定位与背景样式

一、浮动与定位

1. 使用浮动要注意什么？浮动有哪些性质？

【注意】

• 使用浮动，父盒子必须有足够的空间容纳子盒子，不然子盒子会掉下来
• 要浮动就一起浮动，只要有一个兄弟盒子浮动了，其他所有的兄弟元素都要一起浮动

【性质】

• 顺序贴靠性，三个盒子都左浮动，三号盒子会优先贴靠二号盒子，如果父盒子空间不够，则二号盒子会掉下来，贴靠一号盒子的边；如果贴不到一号盒子的边，则回贴靠父盒子
• 浮动会使盒子脱离标准文档流，无论是块级元素还是行内元素，只要设计了浮动，他就可以设置宽和高

2.如何清除浮动

【清除浮动】

• 清除浮动是指，该盒子内的浮动不会影响其他元素，别的盒子的浮动也不要追上来
• 如果一个盒子有over高度，他就不涉及清除浮动的相关话题

【方法】**

• 使用overflow:hidden让盒子形成BFC
• 清除浮动对自己的影响clear:both
• 在每个盒子后加::after，并且给:after:添加clear：both属性
• 在两个父盒子中间加一个盒子，并给中间的盒子赋予clear:both

3. 定位有哪几种？分别有什么功能？

【种类】
1、相对定位position:relative

• 功能：微调元素位置/成为绝对定位的参考盒子（即子绝父相）
• 位置描述词：left right top bottom
• 性质：老家留坑、形影分离（就是说该盒子还是在原来的位置，只不过渲染到了新地方而已）

2、绝对定位position:absolute

• 功能：压盖、遮罩 / 结合CSS精灵使用 / 结合JS动画使用
• 位置描述词：left right top bottom
• 脱离标准文档流（释放自己的位置，对其他元素不会起到干扰作用，而是对他们进行压盖）
• 子绝父相：绝对定位会在 祖先盒子 中寻找 最近的 带有定位属性的 盒子 当作基准点，这个盒子通常是相对定位的
• 垂直