DIV＋CSS布局

当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear来清除。如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性。

clear的作用：如果div采用了float之后它所在的物理位置已经脱离文档流了，在该div后面的元素会占据它的水平位置，如果想让后面的元素重新另起一行，不受浮动的影响，那么就需要在后面的元素中加上float:both;就可以换一行了。

注意：添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果,如下图，前者为加了clear属性的，后者未加。

③相对定位与绝对定位

相对定位是相对于元素在普通文本流中的初始位置，以它所在普通流中的位置为初始点，可以通过设置垂直或水平位置，让这个元素”相对于“它的初始点进行移动。（position:relative）

绝对定位使元素的位置与文档流无关，它的位置是相对于最近的父元素而言的。（position:absolute）

2、固定宽度布局

①一列水平居中布局

（盒子固定宽度高度）代码如下：

<style>

    #one-center-col{

        width: 500px;

        height: 300px;

        background-color: chocolate;

        margin: 0 auto;

    }

</style>

<body>

    <div id="one-center-col"></div>

</body>

浏览器效果如下：

②两列布局

两列布局可以使用float浮动的方式完成。

代码如下：

<style>

    #container{

        width: 800px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #right{

        width: 500px;

        height: 300px;

        background-color: greenyellow;

        float: left;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：

③三列布局

代码如下：

<style>

    #container{

        width: 1000px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #middle{

        width: 500px;

        height: 300px;

        background-color: hotpink;

        float: left;

    }

    #right{

        width: 300px;

        height: 300px;

        background-color: greenyellow;

        float: left;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="middle"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：

3、自适应宽度布局

①两列布局

基本思路：

利用浮动进行自适应布局（也可使用定位进行布局），左边盒子宽度固定，右边盒子的左外边距值设置为左边盒子的宽度即可。

代码如下：

<style>

    #container{

        width: 1000px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #right{

        height: 300px;

        margin-left: 200px;

        background-color: greenyellow;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：

②三列布局

基本思路：

与两列自适应宽度布局原理相同，利用浮动进行自适应布局，中间列自适应（也可使用定位进行布局）

代码如下：

<style>

    #container{

        width: 1200px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #middle{

        margin: 0 300px 0 200px;

        height: 300px;

        background-color: hotpink;

    }

    #right{

        width: 300px;

        height: 300px;

        background-color: greenyellow;

        float: right;

        margin-top: -300px;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="middle"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：