CSS布局
两栏布局
这里我们要用到position，例如做一个左侧固定，右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.left{
position:absolute;
left:0;
width:200px;
height:200px;
background: green;
}
.right{
margin-left:200px;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
效果如图 
三栏布局
同样用position定位，例如做一个左右两侧固定，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.left{
position:absolute;
left:0;
width:200px;
height:200px;
background: green;
}
.center{
margin-left:200px;
margin-right:200px;
height:200px;
background: yellow;
}
.right{
position:absolute;
top:0;
right:0;
width:200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
效果如图
这里有一点需要注意，由于左侧使用了position定位，中间没有设置宽度，则width=auto，所以是自适应状态，这样定位时我们需要在right中使用定位，然后让top为零。
CSS浮动
前面在浮动模型的时候已经讲了一些关于浮动的东西，包括position里面的relative以及absolute，有时候为了页面布局我们必须使用float，但是这样会对后续代码产生很多影响。
特点一：float可以脱离原来的位置，进行定位。如果是left，就从左到右排列，如果是right就从右向左排列。
特点二：当子元素的宽的和大于父元素时，子元素会溢出
浮动元素脱离文档流但是不脱离文字流，也就是说文字可以看到浮动元素，举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.box{
width:500px;
height:500px;
}
.box1{
float:left;
width:150px;
height:150px;
background: greenyellow;
}
.box2{
width:300px;
height:300px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="box2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</div>
</body>
</html>
效果如图 
感觉很神奇，box1明明float了，box2里面的文字这么厉害吗，难道是戴眼镜了，这都能看到。不难得知，文字可以看到浮动元素。
其实浮动元素还有很多特点：
1.块级元素看不到浮动元素
2.文字可以看见浮动元素（包括img标签，行级元素，行级块元素，触发bfc的元素），利用这一特点，我们可以实现文字环绕图片的效果。
清除浮动
利用伪元素，因为伪元素是每个元素天生自带的，它是依赖元素存在的，它可以操作，可以定位，天生就是行级元素，但是它没有元素的结构， 两个自带的伪元素分别是before 和after ，他们将会出现在元素的逻辑前和逻辑后。
所以我们可以利用伪元素进行清除浮动，也就是“三加一”
.father{
*zoom:1;
}
father::after{
content:'';
display:block;
clear:both;
}
注意：只有块级元素才能清除浮动！！！
IE6和IE7 不支持float和bfc，但是他们可以触发layout，layout跟bfc差不多，我们可以利用这个触发它。这时候我们要利用zoom：1；就可以触发layout。为了告诉浏览器他们有这个特性，所以在前面加上*。
