一、固定布局（不适应设备的浏览器的变化）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.header{
width: 1000px;
height: 100px;
background-color: yellowgreen;
margin: 0 auto;
}
.content{
width: 1000px;
height: 400px;
background-color: orange;
margin: 10px auto;
}
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*设置向左浮动*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: royalblue;
float: left;
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: cyan;
float: left;
}
.footer{
width: 1000px;
height: 100px;
background-color: salmon;
margin: 0 auto;
}
</style>
</head>
<body>
<!--头部信息-->
<div class="header"> </div>
<!--主体内容-->
<div class="content">
<!--左中右3个div-->
<div class="left"> </div>
<div class="center"> </div>
<div class="right"> </div>
</div>
<!--底部信息-->
<div class="footer"> </div>
</body>
</html>
扩展：高度塌陷
在文档流中，父元素的高度默认被子元素撑开，也就是子元素多高，父元素就多高。
在浮动流中，当为子元素设置浮动以后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，即会导致父元素的塌陷。由于父元素的高度塌陷，所以
会导致父元素下边的元素向上移动，这样页面会很混乱。所以一定要避免高度塌陷。
解决方案1：可以将父元素的高度写死，但是这样父元素的高度不能自动适应子元素高度的改变。所以这种方案不推荐。
解决方案2：
根据W3C的标准，在页面中的元素都有一个隐含的属性叫Block Formatting Context 简称BFC，该属性可以打开或关闭，默认是关闭的。
当设置开启之后，元素会具有如下的特性：
1、父元素的垂直外边距不会和子元素重叠。
2、开启BFC的元素不会被浮动元素所覆盖；
3、开启BFC的元素可以包含浮动的子元素。
如何开启？（只能间接开启）
1、设置元素浮动（即让父元素也浮动起来）：可以撑开高度，但是可以导致父元素的宽度丢失，而且也会导致下边元素上移
2、设置元素的绝对定位：跟方案1一样效果
3、设置元素为inline-block：可以解决问题，但是也是导致父元素的宽度丢失。
4、将元素的overflow设置为一个非visible的值。一般设置为auto或hidden是最好的方案，推荐设置为hidden，副作用最小。
注意：IE6及以下不支持BFC,它具有一个隐含属性叫haslayout，作用和BFC类似，可以开启这个。
开启方式：直接将元素的zoom（放大）设置为1即可，副作用最小。zoom： 1 表示不放大元素，可以使用这种方式。只在IE中支持，其他不支持。
解决方案3：
前言：如何清除浮动的影响？
使用clear来清除其他浮动元素（上边元素）对当前元素（下边元素）的影响（即下边往上移动），其他元素该浮动还浮动，下边的不动即在原来的位置。
none：默认值，不清除浮动
left：清除左侧浮动
right：清除右侧浮动
both：清除两侧浮动元素对当前元素的影响，即清除对他影响最大的元素的浮动
可以在高度塌陷的父元素后边，添加一个空白的div,由于这个div没有浮动，可以撑开父元素的高度，然后再对它清除浮动，这样可以通过这个空白的div撑开高度，
基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
通过after伪类，选中父元素的后边添加一个空白的块元素，然后清除浮动，原理跟div一样，效果一样，而且不会添加多余的div，最推荐的方式。在IE6不支持，所以
还需要使用haslayout来处理。
二、定位
指的是将指定的元素摆放在页面的任意位置。通过position属性来设置
可选值： static，默认值，元素没有开启定位
relative，元素开启相对定位
absolute，元素开启绝对定位
fixed，元素开启固定定位（也是绝对定位的一种）
当开启定位时，可以通过left、right、top、bottom来设置（是相对于自身定位位置的）左侧、右侧、上侧、下侧设置偏移量。通常只使用2个偏移量就可以对元素
定位。一般选择水平和垂直方向的偏移量来为元素定位。相对于自身定位的。
1、相对定位（relative）
当开启相对定位但是不设置偏移量时，元素不会产生任何变化。
相对定位的元素不会脱离文档流。
相对定位会使元素提升一个层级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 100px;/*开启左偏移，是相对于自身所在位置*/
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--div.box$*3 快捷键 创建3个div名字叫box1-3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2、绝对定位（absolute）
绝对定位会使元素脱离文档流。
开启绝对定位如果不设置偏移量，元素的位置不会发生变化。
绝对定位是相对于窗口的左上角，即浏览器窗口的左上角坐标是（0，0），是相对于最左上角定位的。准确说是相对于离他最近的开启了定位的祖先
元素来定位的。如果祖先没有开启定位，是相对于浏览器窗口来定位，一般开启子元素的定位都会开启父元素的定位。
绝对定位会提升一个层级，会改变元素的性质。
3、固定定位（fixed）
固定定位也是一种绝对定位，是种特殊的绝对定位。IE6不支持。
不同点：永远都会相对于浏览器窗口进行定位。固定定位会固定在浏览器的位置不会随着滚动条向下的移动而移动，如网站的广告，二维码。
原文地址：https://www.cnblogs.com/ID-qingxin/p/11080414.html