float和定位(relativeabsolute)解析

float和定位(relative absolute)

1 首先说一下什么文档流

所谓文档流就是html文档中可显示元素在排列时所占用的位置。html文档流中的标签元素遵循“从左到右、从上到下”的排列次序，有如现代汉字的书写顺序一样。

比如说我们有多个p，根据网页的默认样式他是一个块极元素。所以他就会单独占一行。就会从上到下的排列。

又比如说有多个span标签，根据网页的默认的样式他是一个行级元素，就会从左到右的排列。

其实我简单的理解就相当于我们网页就像我们写作业的纸，我们的元素就写到上面。成为我们元素的内容。我们写东西的时候是不是将文字从左到右的写，写完啦一排再写另外一排呢。其实这个就叫做文档流。

2 什么是脱离文档流

就是元素从普通的布局排版中拿走，其他元素在进行定位的时候，就会想没有这个脱离文档流到元素去布局

二 现在我们来看一下什么是float

我觉得必须要讲的，float使父元素高度为0，并不是一个bug。因为你要知道float他设计的初衷是什么，就是想实现文字环绕效果。使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围.

比如说

.flaotone

{

width: 100px;

height: 100px;

background: blueviolet;

float: left;

}

我每天都很开心

我每天都很开心

效果是这样子的

清除float的两种方法

就是我们我们在最后加一个元素

.clear

{

clear: both;

}

缺点使页面多很多的不必要的元素，就是一些占着茅坑不拉屎的宝宝

就是给父元素添加一个伪类

缺点就是ie6 ie7根本不认识这哥们

.over-flow{ zoom: 1;}//处理兼容性问题

.clear:after

{

display: block;

overflow: hidden;

height: 0;

content: "";

clear: both;

}

或者

.over-flow{ zoom: 1;}

.clear:after

{

display: table;

content: "";

clear: both;

}

这两种是很常用的两种

有兴趣的可以看一下其他的方法，这个博客写得很清楚https://www.cnblogs.com/lingdu87/p/7770752.html(大牛博客)

三 什么是relative 注意使用relative属性，元素还是处于正常的文档流中，但是可以用top bottom left right对元素进行定位

有两个特性

相对自身

无侵入性

相对自身

比如说你已经给一个元素加了相对定位

并且设置里top left都为0，你会发现你的盒子是不会动的，可以看得出它是相对于自身定位。

无侵入性

这里用两种慕课网课程中的css深入理解之relative中的两种截图

移动以后

relative移动后它不会影响其他的元素

我觉得relative还有要讲的是它top bottom right left 的坐标

这里用两种慕课网课程中的css定位position的两种截图

当时top 和bottom的时候就是以自身(也可以说是网页)的左上角为原点 右边为x轴正方向 下边是y轴的正

当时top 和bottom的时候就是以自身(也可以说是网页)的左上角为原点 左边为x轴正方向 上边是y轴的正方向

四 什么是absolute

其实就相当于relative是大哥，而absolute是二弟，absolute就是相对于它父元素的做相对定位，如果父元素没有相对定位就一层一层的往上找到最上面的relative，注意的是元素使用这个属性将会拖离正常的文档流。

但是它的定位和relative是有区别的，如果没有父元素，它将以窗口里定位，注意不是网页，因为网页有可能比窗口要大

比如你以left和bottom来定位

他的原点就是窗口的左下角(如果有父元素就是父元素的做下角)在里面体同样用慕课网课程中的css定位position的一张截图

如果是right和top就是窗口的右上角(如果有父元素就是父元素的右上角)

如果代码这样子写

.father

{

width: 200px;

height: 200px;

background: red;

position: relative;

}

.son

{

width: 50px;

height: 50px;

right: 10px;

top: 10px;

background: blueviolet;

position: absolute;

}

效果是这样子的

好了这次的分享就是到这里了，有什么不足和错误的地方欢迎大家来指出。喜欢的话可以点一个赞，我还是你们的小可爱