CSS浮动与定位

在逆战班学习的第三周了，感觉每天都过得很充实，接下来我来总结一下CSS浮动与定位的内容。

一、首先说一下浮动，什么是浮动呢？

浮动float

文档流:

文档流是文档中可显示对象在排列时所占用的位置。

float特性：加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

 取值:

left沿着父容器靠左排列 /  right沿着父容器靠右排列 /none没有浮动

 float注意点:

只会影响后面的元素。

内容默认是升半层。

默认宽根据内容决定。

换行排列，当容器放不下这些浮动元素的时候，就会换行排列(尽量上浮动的元素高度是统一)

主要给块元素添加，但也可以给内联元素添加。

 

(我们要做上图的布局，只依靠浮动还不行，我们还要考虑浮动所带来的问题，接下来就是我要总结一下如何清除浮动)

二、学习了浮动，必然会知道他会对元素产生一定影响，不利于布局，那么要如何解决浮动所带来的问题呢？

清除浮动

1. 解决上下排列的情况: .

利用clear属性清除float浮动

clear:left/ right

 2.解决嵌套的情况:

固定宽高:不推荐，不能把高度固定死。不适合做自适应的效果。

父元素浮动:不推荐，因为父容器浮动也会影响到后面的元素。

overflow : hidden (BFC规范)，如果有子元素想溢出，那么会受到影响

display : inline-block (BFC规范)， 不推荐，父容器会影响到后面的元素。

clear:both;(比较常用的。左右浮动都清除)

设置空标签:不推荐，会多添加一个标签。

after伪类:推荐，是空标签的加强版，目前各大公司的做法。

 

(实现上边布局，代码我们可以看到用到了clear清除浮动的办法)

 

三、浮动知道了，那么什么是定位？浮动加定位效果是不是又会给我们带来不一样的惊喜呢？

 

 

(上边的例子不仅使用了浮动，还使用了定位)

定位的几种方式position

 

(1)  static (默认)

(2)relative:相对定位

如果没有定位偏移量，对元素本身没有任何影响 

不使元素脱离文档流，空间是会被保留。不影响其他元素布局

left、top、 right、bottom是相对于当前元素自身进行偏移的

(3) absolute:绝对定位

使元素完全脱离文档流

使内联元素支持宽高(让内联具备块的特性)

使块元素默认宽根据内容决定(让块具备内联的特性)

如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)，

注:如果祖先元素中有多个元素具备定位模式，那么是以离自己最近的祖先元素进行偏移。

(4)fixed :固定定位

使元素完全脱离文档流

使内联元素支持宽高(让内联具备各块特性)

使块元素默认宽根据内容决定(让块具备各内联的特性)

相对于整个测览器窗口进行偏移，不受浏览器滚动条的影响

不会受到祖先元素的影响

(5)sticky :黏性定位

在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式

定位偏移量: left /top/ right/ bottom ，不能单独使用，必须得配合定位模式。

 

 

(注:浮动＋定位是我们布局当中要使用的必不可少的一部分)

这就是我对浮动跟定位的理解，有需要学习的同学，希望可以帮助到你!!