常见页面布局（清除浮动，两栏自适应布局）-CSDN博客

一，为什么清除浮动

在非IE浏览器下，当容器的高度为auto,且容器的内容中有浮动元素，在这种情况下，容器的高度不能自动伸长适应内容的高度，使得内容溢出都容器外面影响布局，这个现象叫浮动溢出。

1. 容器中末尾或容器外添加空块级元素设置clear:both

2. 设置容器的overflow属性设置为hidden;

ie6中要考虑设置zoom:1;复制代码

3. 使用邻接元素处理，浮动元素的邻接元素设置clear:both

4. 使用元素的：after伪元素

给元素添加clearfix类名
.clearfix:after{
    content:'';
    display:block;
    visibility:hidden;
    clear:both;
}复制代码

二，两栏自适应布局

1. 第一种方式，传统（兼容IE）

    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>

    .left{position: relative; float:left;width: 200px; min-height:600px; background: #f00;}
    .right{margin-left: -200px; float:right ; width: 100%; min-height:600px; background: #000;}复制代码

重点 .left { position: relative; float:left }
.right { margin-left:-200px; float:right;width:100% }

2. 三栏布局(绝对定位法)

<body>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</body>
body, html{margin:0; padding:0}

.left, .right{position:absolute; top:0; width:200px; background:#f00; min-height:600px;}
.left{left:0;}
.right{right:0;}
.main{margin:0 -200px; min-height:600px; background:blue; 复制代码

3. 三栏布局（margin负值法）

1、此方法都html结构就有要求，一是主体必须是双标签；二是主体结构必须在左栏与右栏之前;
2、左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，
所以这里的-100%margin值正好使左栏div定位到了页面的左侧；
右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
<body>
    <div class="main">
        <div class="main-content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
.left, .right{float:left; width:200px; min-height:600px; background:#f00;}
.left{margin-left:-100%;}
.right{margin-left:-200px;}
.main{float:left; width:100%; min-height:600px; background:blue; }
.main-content{margin:0 200px;}复制代码

4. 三栏布局（自身浮动法）

html
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>
css
    .left, .right{width:200px; min-height:600px; background:#f00}
    .left{float:left;}
    .right{float:right;}
    .main{margin:0 -200px; background:blue; min-height:600px;}
这里三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。复制代码

5. 两栏布局

两栏布局分为左侧定宽/左侧不定宽
左侧定宽（margin+float）
<div class="parent">
    <div class="left">left</div>
    <div class="right-fix">
        <div class="right">
            right
        </div>
    </div>
</div>
.left{
    float: left;     //向左浮动
    width: 100px;    //固定宽度
    position: relative;//由于.left与.right-fix重合，且.right-fix在DOM树上的位置比.left要后，因此.right-fix会遮挡住.left，设置.left为relative可以让其冒出来。
}
.right-fix{
    float: right;     //向右浮动
    width: 100%;    //为了自适应设为100%
    margin-left: -100px;//由于宽度设为100%，.right-fix遭到浏览器换行处理；因此通过设置负的margin值，在左侧制造出100px的空白，使.right-fix与.left重合（即处于同一行）
}
.right{
    margin-left: 120px;    //由于.left和.right-fix重合了，因此给.right设置一个margin-left，避免内容区（.right）与.left重合。另外，120px - 100px = 多出来的20px实际上就相当于.left和.right之间的间隔了。
}

左列不定宽/右列自适应
flex布局
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
.left p{width: 200px;}复制代码