css（三）---定位与浮动的学习

css的再学习
定位（position）的介绍
今天学习的是关于定位的学习，这也是页面布局的一种，那么说一下定位是用来做什么的。我的意思是定位我们想让一个元素去哪，他就能到哪。但是这个定位不能随便乱用，它会脱离文档流，有可能会覆盖下面的元素。用这个定位是一定要注意一下啊，当然这个属性也可以 触发bfc（上篇文章已经说到bfc）
说到position，它有好多的属性值，那么都是什么呢，就和大家聊一下吧，我知道的一共有七个值，分别为： static、absolute、relative、fixed、sticky、center、page，接下来分别介绍一下这些属性名的含义吧。

• static

  static意思是静止， static是默认的属性，当我们没有写position属性的时候，元素默认的定位就是static定位。在元素中什么也不写，就是这个属性了，是不是还不知呢。

• absolute
  absolute是绝对定位的意思，它会使元素脱离本来的位置再进行定位，它会使元素像立交桥一样出现空间上的分层，当元素脱离原来的位置之后（脱离文档流），其他的元素就会看不到这个元素。同时，absolute也可以触发bfc。
  同时，当我们改变定位之后，这个元素就有四个属性可以使用了，分别是left、right、top、bottom。这四个属性分别可以设置当前元素距离左边、右边、上边和下边的距离为多少，但是四个属性很少一起出现，一般都是两两一对出现，其中left和top是一对，right和bottom是一对。
  如果直接进行absolute的话，它会相对于浏览器进行定位，一般情况下它会与relative结合使用的。

div{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 50px;
    top: 50px;
   }

上面一段代码是absolute单独使用的，这样它会与浏览器有一个相对的位置，因为它会向父级寻找relative，若没有设置，它会一直向上到浏览器，最终会相对于浏览器定位。

• relative
  relative是相对定位的意思，它会让元素保留原来的位置再进行定位，后面的元素可以看到它本来的位置。
  当position改成relative之后，left、top、right、bottom进行的定位就会变成相对于自身的位置进行移动了。
  relative的参照物是元素自身。
  当我们仅仅给元素设置position:relative;并没有设置left、right、top、bottom属性的时候，元素的定位是没有发生任何改变的，因为这个特性，一般在开发中，rrelative都是用作设置参照物的，一个absolute元素要相对于那个元素进行移动，就给那个元素设置relative的定位就可以了。
  接下来用一个实例来介绍它们的区别：
  CSS样式：

 .wrapper{
           height: 200px;
           width: 200px;
           background: red;
           margin-left: 50px;
       }
       .box{
           height: 100px;
           width: 100px;
           background: green;
           margin-left: 100px;
       }
       .content{
           height: 50px;
           width: 50px;
           background: yellow;

html样式：

 <div class="wrapper"><!--最外层 -->
        <div class="box">
            <div class="content"></div>
        </div>
    </div>

结果在浏览器上显示：

下面开始进行讲述它们的区别了，给最里层content加一个样式：

.content{
           position: absolute;
           left: 50px;
           height: 50px;
           width: 50px;
           background: yellow;
       }

结果显示如下：

从这个图片可以看出，这是相对于浏览器进行定位的，也验证了我们上述的结论是对的。
若content的样式改为

 .content{
           position: relative;
           left: 50px;
           height: 50px;
           width: 50px;
           background: yellow;
       }

那么结果是：

本来content黄色小方块在绿色方块的左上角，然后relative相对与自身的位置进行定位，这个时候的left属性的意思就是相对于本来在绿色左上角的那个位置向右移动了50px的距离，也就是现在这个黄色小方块所在的位置。
从这个例子可以很容易看出这两个值得区别：
absolute：

1.脱离原来位置进行定位

2.相对于最近的有定位的父级进行定位，如果没有那么相对于浏览器边框定位。

relative：

1.保留原来位置定位

2.相对于最近的有定位的父级进行定位

一般被用来设置参照物

• fixed
  当你在浏览一个网站的时候，有个小广告在一个固定位置一直不变，当你滑动滚轮的时候，它也不会发生任何的变化，这就是运用这个属性。

<style>
.fixed{
   width: 100px;
   height: 100px;
   background: red;
   position: fixed;
   right: 100px;
   top: 50px;
  }
</style>
<div class="fixed">
</div>

拓展环节：

.demo{
      position: absolute;
      margin-top: 200px;
      height: 200px;
      width: 50px;
      background-color: red;
}

我们把absolute换成relative之后，会发现整个div会向上移动一小段距离，这是为什么呢？

一般情况下是不会考虑的，以为在最开始都会设置一个*{margin：0}，如果考虑的话，解释如下：margin合并问题——body标签本身有8px的margin，而四个方向的margin自然包括了margin-bottom，我们为div.demo设置了margin-top，就会导致margin合并的问题发生，当position是relative的时候，并没有触发bfc，所以中间的距离会取二者的最大值，也就是200px，当position是absolute的时候，因为触发了bfc效果，从而消除掉margin合并的bug，因此中间的距离是200+8=208px。

这四个w3c上给介绍的，也是最常用的，那么接下来说一下，不常用的做一下了解吧。

• sticky
  position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

.sticky{
     position: sticky;
     top: 15px;
  }

• center
  与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。

• page
  与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

最后三个是css3的属性，平常很少用的到，大家了解一下就行了。
关于浮动的学习
讲到浮动，那么首先要说的就是浮动是什么是用来做什么的。说到浮动，联系最密切的的元素就是ul和li这两个父子元素，它们经常用到浮动。最重要是这两个元素是块级元素，只要父元素是块级元素，子元素是会计元素，这样才会用到float（浮动）。因为子元素是块级元素想要变成行级元素那样排列，所以在父级添加一个float（浮动）。
接下来，就看一下吧：

  <style>
  *{
            margin: 0;
            padding: 0;
            list-style: none
        }
        ul{
            width: 308px;
            height: 100px;
            background-color: red;
            border: 1px solid black;

        }
        li{
            /* float: left; *//*加float是为清除浮动的*/
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: green;
        }
  </style>
  <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

接下来的效果：

这是正常的，但在实际操作中我们需要的不是这一种，而是需要下面的绿色方块在红色方块里面包裹着。就像淘宝的一些商品分类就是用这种方法做的。只需要上样式里面的注释给加里面就行了。就形成了这样的效果：

通过这个例子大家都应该对浮动有了基本的了解。

float属性
那么该有一个问题了，正常是按照从左到右排列的，这是默认值。当元素超过了父级的元素时，那么它会超出容器进行向下面排列，但是下面的队形还会想第一行的队形一样进行排列的。超出部分自动换行，然后继续排列，这就是这个规律。
超出部分会出现下面的情况：

浮动起来的元素会像absolute的元素脱离文档流，但是不会脱离文字流，这是什么意思呢？

<style>
.top {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
}
.bottom {
      width: 200px;
      height: 200px;
      background-color: black;
      color: white;
}
</style>
<div class=”top”></div>
<div class=”bottom”>我是文字，我能看到文字流哟~</div>

脱离文档流所以，红色的把黑色的覆盖了一部分，按道理文字应该是看不到的，但是文字显示出来，这说明这并不脱离文字流，文字还一样显示。

在这里想插入一个小的插曲：

<style>
    div{
    height: 40px;
    width: 200px;
    border: 1px solid black;
    }
</style>
<div>我这里显示文字的部分，看一下是不是能超出界限</div>
   <div>jsfdasjdfjsdfkljashdfkjdshkjfhaskdjfhiuwfdhjkslh</div>

显示结果是这样的：

浏览器能识别汉字间隔，会自动换行，而英文如果没有空格，它就会认为这是一个单词所以不会换行的，就出现了上面的这种情况。

接着上文说，不脱离文字流的意思则是display属性是inline或者inline-block的元素还是可以看到它的，文字本身是inline属性的。
接下来，我们讲.bottom这个div的display改成inline-block;之后再看一下效果。

.bottom {
      width: 200px;
      height: 200px;
      background-color: black;
      color: white;
      display: inline-block;
}

这是因为，float属性会自动将这个元素的display给改成inline-block的，也就是说，不论你给display加上什么值， 只要有float属性，那么这个元素就是inline-block属性的，这也就是为什么红色浮动方块没有独占一行的原因了。

• float属性只有两个值：left和right，默认的状态是没有值none。
• float：right的效果就是从右边开始排列，刚好和left是相反的效果。

1.对元素进行布局。

2.像absolute一样，让元素浮动起来，产生自己独有的浮动流。

浮动流有两个效果：

① 脱离标准的文档流，但不会脱离文字流 ，正常的元素看不到它，但是有文字属性inline或者文字本身可以看到它。

② 在内部会把改元素变换成inline-block属性的元素。

当然这样有它的好处，上面已经讲到它的好处，当然也会有它的缺点的，这是脱离文档流的。假设父级脱离了文档流，则下面的元素会被覆盖掉，这样会给我们照成很大的不便的。因此我们得想办法解决它呀。
那么接下就说一下，解决float流的方法：

1.使用额外标签法

在子元素下面添加一个p标签

<style>
 .clearfix{
     clear: both;
  }
</style>
 <ul>
        <li></li>
        <li></li>
        <li></li>
        <p class="claerfix"></p>
    </ul>

但是实际上，并不是父级清除了浮动流，而是被p撑开了，p.clear标签能看到上面浮动的元素，ul能看到不浮动的p标签，因此就把p标签包裹进去了，仅此而已（特别像转移，li的浮动，把p元素给撑开了）
我们要知道，html是做结构规划的，这个p标签作为功能标签出现了，这种代码在html里面是不允许出现的，所以我们要尽可能避免这种情况，因此这种方法不适用。

2.利用伪元素

这种方法最实用的，用的最多的，平常也是使用这一种来清楚浮动的。常用的伪元素：:after、：:before.

ul::after {
      content: '';//即使元素里什么也没有也必须加上这个属性。
      clear:both;
      display: block; // 能清除浮动的元素，必须是块级元素！！
}

那么现在问题来了，ie6、ie7并没有伪元素这种东西，怎么办？

前面我们介绍了bfc，这里我们介绍ie6ie7独有的一个东西——hasLayout。只要触发了hasLayout就和触发bfc有差不多的作用，能够触发这个东西的属性有很多，其中最无害的属于zoom属性了。
不过我们其他的浏览器并不需要zoom这个属性，这个属性只是为了ie6和ie7准备的，所以这个时候我们需要一点点css hack，我们在zoom前面加一个*号， *zoom: 1; 这个符号只有ie6和ie7能够识别，其他的浏览器都不识别，这样就可以让只有ie6和ie7去读这一行属性，其他浏览器直接忽略。顺便一提属性前面加上’_‘之后，就只有ie6可以识别了。_zoom: 1;

ul{
  *zoom: 1;//兼容IE6，IE7浏览器
  }

项目中都是使用这种方法进行清楚浮动。

3.给父元素定宽高

这种方法很有局限性，如果给你一个页面不让你定宽高的话，那么这种基本上没啥用，因此这种方法很少的去使用。

4.利用overflow：hidden

ul{
  overflow： hidden;
 }
 ul{
    *zoom: 1;
  }

前面的文章也说到触发bfc，这就是利用触发bfc的方法。
5. 父元素的浮动
6. 给父元素绝对定位。
这两种方法都得需要，在父元素外设一个心的元素，清除一下浮动流，这方法太麻烦了，基本上不怎么用。
先就说到这了，未完待续、、、、、、