关于如何使用css布局
左右布局
在页面开发过程中要对页面进行左右布局排版，如何使用css的相关知识来做到呢？
以实际代码编辑为例
我们需要网页中的某一块内容是以左右布局方式呈现的
1.新建一个`div`在其内部在创建两个`div`标签表示为页面的左右两部分
2.给两个`div`写入一些`css`样式，使其呈现出效果来
3.可以看到由于两个`div`标签是属于块级元素，在文档流中独占一行，不能并列一行显示。
4.所以可以使用`css`中的浮动属性`float`来改变其正常文档流，使其左浮动，并列为一行，达到我们想要的效果。
5.浮动后的效果
左中右布局
左中右布局和左右布局其实是一样的.都可以使用`css`中的`float`属性来达到效果，如下图：
以实际代码为例
1.创建三个`div`分别为左中右三块
2.给其写入一些css样式
可以给中间的`middle`的宽度设置为100%，使其能够页面自适应
3.效果如下：
4.然后给三个`div`分别加入`float:left`使其左浮动，并列为一行显示
5.浮动后效果如下：
水平居中
在页面开发中，我们遇到需要将页面中的部分内容进行水平居中展示；
以实际代码为例
1.创建三个块级元素`div`，使其为内包含的结构
2.加入`css`样式
3.得到如下效果
4.现在需要将它们设置为水平居中的显示状态，我们可以通过设置他们的`margin`外边距属性来达到效果；
我们将每一个`div`的外边距设为`{margin:0 auto} `
`0`表示为上下外边距离为0
`auto`表示左右外边距离为自适应，相等，也就是居中的意思
5.然后会发现效果如下：
每一个块级元素，都相对应自己的左右距离是相等的，实现了水平居中的效果
垂直居中
在`css`中除了能设置内外边距来调整结构布局，还能通过`position`定位属性来实现整个页面中的元素位置移动布局：
如下图，将绿色元素水平垂直于红色背景下；
1创建`div`结构
2.写入`css`样式，将背景设置为宽1000px 高为500px;
里面的`middle`设置为宽200px 高100px;
3.效果如下
4.设置`position`定位属性，
“父相子绝” 父级元素加上相对定位，子元素加上绝对定位
首先给父级元素加上相对定位属性`{position:relative;}`
然后给`middle`设置绝对定位属性`{ position: absolute;}`
`top:200px`意为`middle`元素距离父级元素`div`的上部距离为`200px`
`left:400px`意为`middle`元素距离父级元素`div`的左边距离为`400px`
5.得到效果如下
清除浮动副作用
在页面布局中给元素使用`float`浮动属性后，会导致元素脱离正常的文档流，影响结构的高度
例如；
1.创建三个块级元素，写入css样式 ,得到如下效果
2.给`middle`元素加上`float`浮动属性，使其左浮动,
发现父级元素的高度收到了影响
3.使用`clearfix`清除浮动的副作用
给父级元素`mian`加上`clearfix`
给`clearfix`写入css样式
发现效果如下：
父元素的高度回复正常了
