CSS的基础学习6 -浮动与定位

发表于   |  

CSS定位

CSS有三种基本的定位：普通流、 浮动、绝对定位

普通流就是浏览器对块级元素、行内元素等默认的排列方式。

浮动

CSS允许任何元素浮动，浮动元素相当于会从正常的文本流中删除。最开始float是用来做文字环绕效果的。

<div><img src="http://img3.duitang.com/uploads/item/201606/17/20160617162436_JcNwY.thumb.700_0.jpeg" style="width:100px;float:left;" >
</div>


蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆蕾姆


float主要用于横向排版、或者多列布局，虽然好用，但也有很多问题，比如浮动会造成的父元素高度塌陷。

<div style="border:1px solid #000;padding:10px;" ><img src="http://img3.duitang.com/uploads/item/201606/17/20160617162436_JcNwY.thumb.700_0.jpeg" style="width:100px;" >
</div>

加上浮动

<div style="border:1px solid #000;padding:10px;" ><img src="http://img3.duitang.com/uploads/item/201606/17/20160617162436_JcNwY.thumb.700_0.jpeg" style="width:100px;float:left;" >
</div>

加上浮动后，父元素出现了坍塌现象，主要是因为float让元素脱离了文本流。

当对父级元素加上float后，会出现包裹性。

<div style="border:1px solid #000;padding:10px;float:left;" ><img src="http://img3.duitang.com/uploads/item/201606/17/20160617162436_JcNwY.thumb.700_0.jpeg" style="width:100px;" >
</div>

另外float还具有清空格的作用，如img之间默认会有空格，添加float后就会排布紧密了。

清除浮动

清除浮动有很多方法，有的博客都列举了8个多，我觉得掌握几个基本的就可以了，其他有些也很麻烦，只做了解。常见的方法先列举几个。

  1. 给父级元素设置浮动
  2. 给父级元素设置固定高度height
  3. 给父级元素定义 overflow:hidden
  4. 浮动元素结尾处加空div标签设置clear:both

  5. 父级div定义 伪类:after

    div:after{display:block;clear:both;content:””;visibility:hidden;height:0}

现在一般都用给父级元素定义 overflow:hidden来清除浮动，而其他的视情况而定。

定位

定位的关键字就是position了，我们一般的定位除了网页默认的块级元素和行内元素由上到下、由左到右，然后用设置盒子模型的margin，padding来进行基本移动，再加上浮动float来进行横向排版这些方法外，还有一个不能缺少的定位方法就是运用positon。

position一共有四个属性：

  • static默认属性
  • relative

relative相对定位，会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化

<html>
<body>
<div >123</div>
<div style="position:relative;top:10px;left:20px;">123</div>
<div >123</div>
</div>
</body>
</html>

123
123
123
  • absolute

absolute绝对定位，当元素设置absolute之后，就会和float一样脱离普通文本流。且最重要的是absolute的元素对于祖先有absolute或relative的元素进行定位。且absolute一般不跟float同时使用。

123
123
123

加上absolute后：

<html>
<body>
<div >123</div>
<div style="background-color:yellow；position:absolute;">123</div>
<div >123</div>
</div>
</body>
</html>

123
123
123

这里体现了absolute的许多特性

  • 第一个是具有包裹性之前div的宽度是整个屏幕，之后为文字宽度。

  • 第二个是跟随性，当没有设置left和top的值的时候是这个样子的 

    123
    123
    123
    他会待在原位，但不占文本流的位置空间。设置left和top后就会根据上下文来进行定位，也就是absolute的元素对于祖先有absolute或relative的元素进行定位。

那么我们如果把left改为margin-left呢

123
123
123

这时就会相对原来位置进行移动，可见left和margin-left是有区别的。

  • fixed

fixed和absolute的区别

absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。而relative元素的定位永远是相对于元素自身位置的。