div块级元素的高度由其内部文档流元素的高度总和决定。

内联元素高度由字体和设计师决定。

文档流（Normal Flow）指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。通俗点说就是文档内部元素的流动方向。

块级元素从上往下流动（单独霸占一行）。
内联元素从左往右流动（与其他行内元素并排）。

水平居中

水平居中可分为块级元素居中和行内元素居中。
1.css设置块级元素水平居中
div p{margin:0 auto; width:500px} /块级元素p一定要设置宽度，
才能相当于DIV父容器水平居中/

给div设置margin:0 auto ,这样就能居中 。

margin:0 auto

2.css设置行内元素水平居中
给其父级元素添加 div{text-align:center} /DIV内的行内元素均会水平居中/

text-algin:center

垂直居中

1.css设置设置行内元素的垂直居中

div{height:30px; line-height:30px} /DIV内的行内元素均会垂直居中/

2.css设置块级元素垂直居中

div{width:500px}

/DIV父容器设置宽度/

div p{margin:0 aut0; height:30px; line-height:30px}

/块级元素p也可以加个宽度，以达到相对于DIV父容器的水平居中效果/

左右布局

1.用float布局

<div class="first">leftcontent</div>
<div class="second">rightcontent</div>
.first{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid red;
}
.second{                       
  width:100px;
  height: 100px;
  float:right;
  border:1px solid green;

#######左中右布局

<div class="container">
    <div class="clearfix inner" style="float:left"> 
        <div class="first">left</div>
        <div class="first">middle</div>  
     </div>   
     <div class="third">right</div>
</div> 

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}
.first{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid red;
}
.second{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid green;
  margin-left:25px;
}
.third{                       
  width:100px;
  height: 100px;
  float:right;
  border:1px solid green;
}