布局方式
1.默认的就是文档流的方式
以默认的html元素的结构顺序显示
2.浮动布局方式
通过设置html元素的float属性显示
3.定位布局方式
通过设置html元素的position属性显示
浮动
浮动（float）CSS实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示
浮动是将块元素的霸道属性（独占一行的取消），允许别人和它一行，其实就是这个块从原来的文档流模式中分离出来，它后面的对象就视它不存在
值：
none：不浮动
left：对象向左浮动，而后面的 内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
补充：当父元素没有指定高度并且它的子元素有浮动时，这时，这个父元素的高度不会自动增加
1常用的布局效果：例如，一行并列式，就是在一行中，显示几个块元素
如果想让多个块显示在同一行中，可以将这些块都设置为浮动，并且浮动方向相同
2CSS把网页元素，分为两类，一类是块，一类是内联
Body,div,p,h1
3ul和li默认情况下是块元素，要想让他们在一行中显示，就要用到浮动。
4我们在制作时，多使用不同的浏览器查看你的结果，这样，就知道各种浏览器的差别
5当IE6父元素中的子元素的高度超出了父元素，IE6会把父元素的高度自动增加
清除浮动
就是去掉前面对象浮动对后面对象的影响
clear ：
none：默认值，不清除浮动
left：只清除向左的浮动
right：只清除向右的浮动
both：所有浮动都会清除
浮动浮动，先浮后动，浮动的对象，会先漂浮起来，离开原来的位置，后动，就是它后面的对象会向它原来的位置上动起来
出现的问题：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客布局</title>
<style>
body,div{
margin:0;
padding:0;
}
#left{
width: 200px;
height: 100px;
background-color: red;
float:left;
}
#right{
width: 300px;
height: 300px;
background-color: green;
float:right;
}
#footer{
height: 50px;
font-size: 20px;
background-color: blue;
clear:both;
}
</style>
</head>
<body>
<div id="left" >1</div>
<div id="right" >2</div>
<div id="footer" >3</div>
</body>
</html>
执行代码的截图（正常截图）：
当浏览器窗口的逐渐变小后，红块和绿块本应该在同行的元素的位置发生了改变。改变了原来的位置
改变位置的截图:
解决方法：在左右两块外加一个父元素，用于控制它们的整体
总结：清除浮动方法总结
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决浮动元素的影响。
方法一：额外标签法
这是最简单到的方法，在浮动容器的末尾增加一个”clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素
.class{clear:both}
<div id="top" >4</div>
<div id="main">
<div id="left" >1</div>
<div id="center" >3</div>
<div id="right" >2</div>
<div class=”clear” ></div>/*添加一个空div*/
</div>
<div id="footer" >3</div>
方法二：父元素使用overflow元素
通过设置父元素overflow值设置为hidden，使最简单的清除浮动的方法，但如果使用的定位布局，就会很难实现
CSS中溢出的使用
| 功能 |
语法 |
| 设置当对象的内容超过其指定高度及宽度时如何管理内容 |
overflow:visivle[默认值。不剪切内容也不添加滚动条]，auto[在必要时对象内容才会被裁切或显示滚动条]，hidden[不显示超过对象尺寸的内容]， scroll[总是显示滚动条] |
方法三：利用伪对象agter方法：
定义一个类，使用伪after，控制浮动元素的影响
网上最流行的清除浮动的代码：
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:””;
}
定位布局
就是可以通过元素的position属性控制元素的位置
当我们要使用绝对定位时，必须要有两个条件：
- 必须给父元素加定位属性，一般简易使用position：relative
- 给子元素加绝对定位position：absolute，同时要加方向属性
属性:position
描述：设置对象的定位方式
值：
static：静态定位：页面中的每一个对象的默认值
absolute：绝对定位:将对象从文档流中分离出来，通过设置left，right，top，bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative：相对定位：对象不从文档流分离，通过设置left，right，top，bottom四个方向相对于自身位置进行相对定位。
相对定位和绝对定位的区别：
绝对定位是以父元素为基准点，进行定位,会脱离文档流。
相对定位是根据其自身为基准点，进行定位，离开原来的位置，但还占着原来的空间。
注意：有些元素有内外边距
补充：css控制字体样式：
补充：向想文字在垂直方向上居中，将行高设置为元素的高度，行高=元素高度（文字的内容不能超过元素的宽度，也就是说不能换行）