CSS 教程（2）-属性5-Positioning，Float，布局 - 水平 & 垂直对齐

1.Positioning(定位)
position 属性的四个值：
static
relative
fixed
-absolute
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。

static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
下面的代码演示了，设置top等也是没有用的，还是在文档流中显示

        <style>
        p.pos_fixed
        {
            right: 20px;
            top:30px;
        }
        </style>
      
        <p class="pos_fixed">Some more text</p>
        <p>Some text0</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

        <style>
        p.pos_fixed
        {
            position:fixed;
            top:30px;
            left:50px;
        }
        </style>
      
        <p class="pos_fixed">Some more text</p>
        <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

把浏览器缩小，能够体会出上面的话。

relative 定位
相对定位元素的定位是相对其正常位置。
即使元素被移动了，但是元素的下一个元素还是在正常文档流位置，不会随被移动的元素而移动

<style>
    h2.pos_top {
        position: relative;
        top: -50px;
    }
</style>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p>
    <b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素(指除static定位的三种定位之一)，如果元素没有已定位的父元素，那么它的位置相对于<html>.
absolute 定位使元素的位置与文档流无关，因此不占据空间。(如果不设置top，那么对于它上面的元素，它还是遵循文档流的，即top值好像是auto的类似)
absolute 定位的元素和其他元素重叠。
下面的代码很能说明问题

<style>
h2
{
    position:absolute;
    top:150px;
}

.aaas
{
    position: relative;
    top: 50px;
}
</style>

    <div style="height:200px;background-color: red"></div>

    <div class="aaas">

    <h2>这是一个绝对定位了的标题</h2>
    <p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
    <p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p><p>sdfsd</p>
</div>

重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
bottom属性定义及使用说明
对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。position:absolute
对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。position:relative
注意：如果"position：static"，底部的属性没有任何效果。
clip 属性
clip属性，让你指定一个绝对定位的元素position:absolute，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。
注意：: 如果先有"overflow：visible"，clip属性不起作用。
overflow 属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

2.Float(浮动)

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。即把浮动的元素当成正常文档流元素处理了。

float是脱离文档流的，但是没有脱离文字流。所以文字可以浮在它的周围。

下面利用浮动，做一个菜单(注意，设置一个min-width这样，缩小浏览器的时候，不会导致菜单变形)

<ul class="topmenu">
        <li><a href="#home" class="active">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
        <li><a href="#about">关于我们</a></li>
      </ul>

    <style>
      .topmenu {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #777;
        min-width: 700px;
    }
    .topmenu li {
        float: left;
    }
    .topmenu li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
    }
    .topmenu li a:hover {
        background-color: #222;
    }
    .topmenu li a.active {
        color: white;
        background-color: #4CAF50;
    }
    </style>

一个能说明问题的例子：

<body>
    <div class="main">
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
</body>

<style>
    .div2 {
        width: 200px;
        height: 100px;
        float: left;
        border-style: solid;
    }

    .div3 {
        width: 400px;
        height: 50px;
        background-color: silver;
    }

    .main {
        width: 650px;
        border: 1px solid;
    }
</style>

上面的这个例子：mian的高度，靠div3把高度撑起来，因为它们两个都是未浮动的。而div3未浮动，所以被div2覆盖了部分，说明div2脱离了文档流，但是div3的文字在div2后面显示，说明div2没有脱离文字流。

如果让main浮动起来，那么它的高度会被div2撑起来。
如果让div3浮动而main不浮动，那么mian会是一直线，无法撑起高度了。并且div3会在div2后显示了。
如果mian浮动，div3不浮动，如果div3高度高于div2，也是可以把mian的高度撑起来的。

3.CSS 布局 - 水平 & 垂直对齐

元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中

img {
    display: block;
    margin: 0 auto;
}

左右对齐 - 使用定位方式
我们可以使用 position: absolute; 属性来对齐元素
左右对齐 - 使用 float 方式
我们也可以使用 float 属性来对齐元素
当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
垂直居中 - 使用 line-height

CSS 教程（2）-属性5-Positioning，Float，布局 - 水平 & 垂直对齐

推荐阅读更多精彩内容