逆战班学习详解CSS浮动与定位细节

 首先我们先说一下浮动的一些小细节，了解浮动，就得先明白，文档流是什么，简单来说就是元素所占用的位置，会使其容器在不加高度和宽度的时候会使其有相应的自适应的高度。而我们在使用浮动中经常会遇到的问题，就是浮动的元素会影响，后面的元素。所有我们必然就得给每个有浮动的元素的父元素清楚浮动，注意是给父元素清楚浮动而不浮动的元素，不然那将毫无意义。那下面我们将面临的就是如何清除浮动？

首先说到清除浮动，想必大家第一想到的就是 “clear “，毕竟这个属性的功能就是清楚浮动，但是它也有它的缺陷，clear只能就解决上下排列的情况，适合这种环绕效果

而我们一般所面临的是嵌套上下排列的问题，当然这里也给出了相应的解决方案：1、固定宽高，这种做法我不推荐，因为当我们需要改变子元素的内容时，父容器也得改，做网页呢，我们尽量将高度做成自适应得样式，也方便我们以后得更改。2、给加父元素浮动,(不推荐)，首先无论是什么元素，但凡有浮动就会影响到后面元素，必须清楚，所有说我么给父元素加浮动，那后面还得全部清楚，依次全部使用这种方法，有不是很方便。3、这种呢就是bfc规范 overflow：hidden
，这样得话如果子元素要溢出，也会受到影响，毕竟他除了是bfc规范，它还有裁剪的功能。4、也是bfc规范一种，display：inline-block，（不推荐）父容器会对后面元素有影响，5、设置空标签,(不推荐)多了一个标签，毕竟我们代码呢是越少越好。最好的的网页当然就是用最少的代码，做出最完善的页面。注意：6、这种是最实用也也是当下用的最多的一种，.clear:after{content:”",display:block,clear:both} 这种伪类的添加方法我们首先要明白，clear清楚浮动默认情况只能给块元素添加，after这个伪类默认是内联的，所以我么要改变这个元素类型，注意伪类里的content必须加！！！

（没有清楚浮动的）

（清楚浮动）

接着我们说一下这定位的一些小细节和我们常遇到的一些问题，首先我们先要知道定位的取值有5种 ：相对relative 绝对absolute 固定fixed
sticky 粘性定位 最后就是默认的static，今天我们主要讲我们常用的相对定位和绝对定位，关于相对定位，首先它本身在没有定位偏移量(left,top,bottom,right)对内容没有任何影响，他不会使元素脱离文档流，其次定位偏移量都是相对与元素本身进行偏移的，最常见就是和绝对定位相配合使用，还有一种情况就是配合z-index使用，具体怎么使用，我在这不太详解，毕竟情况不同，我们必须随机应变。当然他还可以单独使用，我们主要说一下，它与绝对定位absolute的一些细节，我们要知道每个绝对定位都需要的一个相对定位来配合使用，绝对定位会找一个离他最近的相对定位配合使用，如果没有相对定位，那他就会与整个页面来进行配合使用。

还有就是举例说明：首次我们需要一个div .pic容器，嵌套ul(就是list)。当我们要给ul当中所有li全都定位在一起，我们就需要用到绝对定位给ul里的li 相对定位给ul，（上图）

.list{position: relative;}
.list li{width: 100%; position: absolute;left: 0px;top: 0px;//后面是讲图片居中显示 left: 50%; margin-left: -500px; }

这时候如果父容器，就是包裹ul的容器main没设置高度，那main的高度就是0，

当然即使它为0，li里的东西依然会显示，被撑开了。这种情况就是由于li使用的固定定位，前面我也说过，他会脱离文档流，就是不在这main容器里了，所以main没有高度，没有被撑开。 讲的有些潦草，多多包涵