html5float布局注意 css float布局

布局方式

• 一列布局
  通常固定宽高，用margin：0 auto；居中显示
• 两列布局
  说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。设置左左浮动，或设置左右浮动（这是需要确定父级元素的宽度）。如何父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响 。对于自己相邻元素清除浮动产生的影响用：clear：both;。
• 三列布局
  两列定宽中间自适应：首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响！或者为父级元素设置relative属性，再为子元素设置absolute属性，再分别定位，调间距。
• 混合布局
  在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。

对齐方式

• 水平居中

• 行内元素的水平居中
  如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内水平居中，将子元素的display设置为inline-block，是子元素变成行内元素
• 块状元素的水平居中（定宽）
  当被设置为定宽块级元素时，设置左右margin值为auto来实现居中。
• 块级元素的水平居中（不定宽）
  可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素设置text-align：center来实现居中效果。
  当不定宽块级元素的宽度不要占一行时，可以设置display为inlin或inline-block来实现。

• 垂直居中
  父元素是盒子容器且高度已设定

• 子元素是行内元素，高度由其内容撑开
  设定父元素的line-height为其高度来设置垂直居中
• 子元素是块级元素但是子元素高度没有设定
  无法用margin，padding来设置，通过给父元素设置display：table-cell；verticle-align：middle来解决。
• 子元素是块级元素且高度已设定
  计算子元素的margin-top或margin-bottom，计算方法为（父元素高度-子元素高度）/2。

• 水平垂直居中

• 水平对齐+行高
  text-align+line-height实现单行文本水平垂直居中
• 水平+垂直对齐

• text-align+verticle-align
  在父元素设置text-align和verticle-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。
• 若子元素是图像，可不使用table-cell，而是其用行高代替高度，且字体大小设置为0。子元素本设置为verticle-align：middle。

<style>
  .parent{
   text-align: center;
  line-height: 100px;
  font-size: 0;
  }
  .child{
  vertical-align: middle;
  }
</style>

<div class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>

• 相对+绝对定位
  使用absolute，利用绝对定位元素的盒模型特性，在偏移值为确定值的基础上，设置margin：auto

<style>
.parent{
  position: relative;
 }
.child{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  width: 80px;
  margin: auto;
 }
 </style>
 
 <div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
 <div class="child" style="background-color: lightblue;">测试文字</div>
 </div>