三种布局方法@慕课网原创_慕课网

布局方式有三种：流式布局，浮动布局，绝对定位布局；

流式布局，即标准文档流，利用盒子模型的距离来实现各个元素的布局；
概念：从左到右，从上到下渲染内容，由块级标签和行级标签组成；
浮动布局，即通过float属性来实现各个元素的布局；
float:none | left | right;
特点：
1.元素会移动直到碰到容器的边缘为止；
2.设置了浮动的元素仍然处于标准文档流中；
3.当元素没有设置宽度，而设置了浮动属性以后，元素的宽度会随内容改变；
4.当元素设置了浮动之后会对他相邻的元素造成影响，相邻元素特指紧邻后面的元素，可以用clear：both清除浮动；
5.当子元素设置了浮动而父元素没有设置浮动时，也会对其父元素造成影响，使其父元素缩成一条，这时候使用clear来清除浮动没有效果，需要在其父元素中加入{width:100%;overflow:hidden;}来清除浮动。
例子：浮动常用来做横向的两列布局或者三列布局，这里展示的是三列布局，左右宽度固定，中间随浏览器的大小而改变；

<!-- 这是HTML -->
<div id="container">
        <div id="left">此处使用浮动定位实现</div>
        <div id="center">此处使用浮动定位实现</div>
        <div id="right">此处使用浮动定位实现</div>
</div>

/*这是css*/
#container{
    width: 100%;
    overflow: hidden;/*这两条语句来清除由于子元素使用浮动造成父元素受到的影响*/
    background-color: #ffff99;
    border:1px solid #111111;
    padding: 5px;
}
#left{
    float: left;
    background-color: black;
    width:200px;
    height: 100px;

}
#center{
    float:left;
    background-color: red;
    width: 50%;
    height: 100px;
}
#right{
    float: left;
    background-color: blue;
    width:200px;
    height: 100px;

}

3.绝对定位布局
概念：position拥有三种定位形式，默认静态定位（static）相对定位（relative）绝对定位（absolute和fixed）
相对定位：相对于自身位置进行偏移（前提你得设置偏移量），仍处于标准文档流中，会产生空间的层堆叠。
绝对定位：建立了以自己的父包含块为基准的定位，完全脱离了标准文档流会产生空间的层堆叠；
对绝对定位的分析分为两种情况：1.未设置偏移量时，无论其父包含层有没有设置定位属性，它都留在初始位置。2.设置偏移量时，会以它的设置了定位的父包含层为基准进行偏移，若没有已经设置定位属性的父包含层时，它会以HTML为基准进行偏移。
例子：绝对定位也会被用在两页布局或者三列布局，但是应用不如浮动定位那么多，以下是三列布局，左右宽度固定，中间随浏览器变化。

<!-- 这是HTML -->
<div id="container">
        <div id="left">此处使用绝对定位实现</div>
        <div id="center">此处使用绝对定位实现</div>
        <div id="right">此处使用绝对定位实现</div>
</div>

/*这是css*/
#container{
    position: relative;
    background-color: #ffff99;
    border:1px solid #111111;
    padding: 5px;
    height: 200px;
}
#left{
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: black;
    width:200px;
    height: 100px;

}
#center{
    position: absolute;
    top: 5px;
    left: 205px;
    background-color: red;
    width: 70%;
    height: 100px;
}
#right{
    background-color: blue;
    width:200px;
    height: 100px;
    position: absolute;
    top: 5px;
    right: 5px;

}