css页面的一些位置相关问题

左右布局

 关于页面布局，正常情况下是按“文档流”来走的，也就是从上到下布局。如果要实现左右布局（横向布局）的话，则需要破坏正常的文档流。一般我们使用float来实现：

左右布局
我们会发现棕色的色向上移动了,而里面的文本C却没有发生变化。这就是浮动发生后发生的脱离文档流带来的bug。所以我们一般在浮动后都会给其父元素添加属性消除浮动带来的影响：

.clearfix::after {
  content:'';
 display:block;
 clear:both;
}

清除浮动

左中右布局

左中右布局也属于横向布局，其实就在右边再加一个<div>而已。再就利用定位属性，在页面中实现左中右布局。

水平居中

实现水平居中的方式有多种，常见的：

• 如果是文本的话，使用text-align="center"即可实现；
• 如果是块状元素的话，直接通过设置margin: 0 auto;即可实现<div>居中； 左右居中

垂直居中

实现垂直居中并不容易，目前最基本的几种方式：

• 文本居中利用文字行高等于所在元素高度：line-height=height实现；如果知道文本确切的行高与其高度，则可以利用padding上下相等实现文本居中。
• <div>居中最简单的利用上下margin相等或者margin: auto 0;实现；
• 当父元素高度由子元素高度决定时，则可以设置上下padding相等实现垂直居中。或者知道确切的父子元素的高度，也可以通过合理的设计实现垂直居中。 垂直居中