浮动定位 float|position

84 阅读 0 评论 56 点赞

我是靠谱客的博主要减肥秀发，最近开发中收集的这篇文章主要介绍浮动定位 float|position，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、浮动：float
对应值：left right none

二、浮动的原理
1.浮动元素将脱离标准文档流，浮动元素后面的元素依次向上填充

2.浮动元素不会覆盖行内元素

3.浮动元素变为行内块级元素，内容有多宽整体盒子就有多宽

三、文档流：网页中元素的排列顺序
1.标准文档流（默认）：从左到右，从上到下排列

2.浮动流：

左浮：先从左到右，在从上到下排列

右浮：先从右到左，在从上到下排列

如果一行内容已满，则换行显示

四、浮动带来的问题
导致父盒子塌陷

五、如何解决父盒子塌陷（扩展盒子高度|清除浮动的影响）
1.清除浮动的影响：overflow

对应值：


visible（默认值）
hidden（超出隐藏）——扩展：text-overflow:ellipsis，超出部分以省略号显示
scorll，滚动条

2.清除浮动：clear 写在父级元素的最后

对应值：


left
right
both（左右两边谁最高就以谁为准）

overflow与clear的区别：

（1）overfloe添加在父级上，绝对定位不能实现清除浮动（vixible值没有这个功能）

（2）clear属性应用在浮动元素后面，clear会添加一个新标签

3.给父盒子设置高度

4.父级元素与子元素一起浮动（不推荐使用）

5.使用after伪类

六、伪类选择器
概念：

1伪类相当于一个类

2.伪元素相当于一个元素

a标签的四个伪类：

1.a:link，未点击时

2.a:visited，已点击

3.a:hover，悬停

4.a:active，激活状态

hover active，是所有元素都具有的伪类

定位:position

定位可多层叠加
对应值：
1.static：没有定位（默认值）
2.relative：相对定位
原理：无论是标准元素还是浮动元素，相对于它没有定位前的位置进行偏移
top和bottom 和right各自都只能设置一个的值
设置定位后，不会脱离标准文档流
3.absolute：绝对定位
原理：_如果有已经定位的祖先元素，就以最近的祖先元素为准;没有定位的祖先元素时，以页面的可视内容为准进行设置
top和bottom 和right各自都只能设置一个的值
设置定位后，会脱离标准文档流，变为行内块级元素
4.fixed：固定定位
原理：相对于浏览器窗口进行设置
设置定位后，会脱离标准文档流，变为行内块级元素