html定位属性和浮动元素的知识点

认识html定位属性

位置属性 position

static 静态位置属性

• 元素没有脱离文档流。
• 跟没有定位一样，对象会融入到正常的文本流中。

相对定位 relative

• 相对自身起始位置进行定位； 自身脱离了文档流
• 定位后原来的位置不被其他元素所占据
• 应用：适合用于元素微调

绝对定位 abosult

• 相对祖籍元素中具有 position 属性的元素,且值不是static的元素，进行绝对定位，如果所有祖籍都没改属性，那么久相对于body进行绝对定位
• 定位后元素本身脱离文档流，位置被其他元素所占据，元素大小有默认百分之百变为内容大小（默认无外边距）
  固定定位 fixed
• 相对于视图窗口进行定位；
• 元素自身脱离文档流
• 原来的位置被其他元素所占据
• 元素有原来默认宽度百分之百；变为内容大小；尽可量小。
• top 目标元素距离视图窗口顶部 如果小于0 则 往上走
• bottom 目标元素距离视图窗口底部 如果小于0 则 往下走
• left 目标元素距离视图窗口左边 如果小于0 则 往左走
• right 目标元素距离视图窗口右边 如果小于0 则 往右走

浮动 float

1：浮动后：元素本身脱离文档流，原来的位置被其他元素所占据
2：浮动后；在同一个父元素中，目标元素回占据一个浮动后位置。
3：注意：浮动只能是；子元素在容器中进行位置移动。如果父容器剩余宽度不能容纳两一个子元素，那么久换行。
** 目标元素的浮动范围：父容器 **
4：同一位置多个元素；具有浮动属性的元素；层级高于不惧有浮动属性的元素

总结;
浮动元素浮动了以后就像变成了灵魂体一样别的标签看不到他他却能看到别的标签,他会给别的标签让位别的标签不会给他让位
浮动规律：第一步元素在布局流中的起始位置，第二步 ：沿自身水平方向进行浮动，如果水平方向空间不够，那么自动换到下一行

5: 解决浮动 带来的问题，
- 方式一：给父元素设置一个固定高度
- 方式二：在最后一个浮动元素，元素下面新加一个元素，清除浮动
- 方式三：伪元素清除；给父元素添加伪元素 content:"",display:block ;clear:both;