div塊級元素的高度由其內(nèi)部文檔流元素的高度總和決定。

內(nèi)聯(lián)元素高度由字體和設(shè)計師決定。

文檔流（Normal Flow）指的是元素排版布局過程中，元素會默認(rèn)自動從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。通俗點(diǎn)說就是文檔內(nèi)部元素的流動方向。

塊級元素從上往下流動（單獨(dú)霸占一行）。
內(nèi)聯(lián)元素從左往右流動（與其他行內(nèi)元素并排）。

水平居中

水平居中可分為塊級元素居中和行內(nèi)元素居中。
1.css設(shè)置塊級元素水平居中
div p{margin:0 auto; width:500px} /塊級元素p一定要設(shè)置寬度，
才能相當(dāng)于DIV父容器水平居中/

給div設(shè)置margin:0 auto ,這樣就能居中 。

margin:0 auto

2.css設(shè)置行內(nèi)元素水平居中
給其父級元素添加 div{text-align:center} /DIV內(nèi)的行內(nèi)元素均會水平居中/

text-algin:center

垂直居中

1.css設(shè)置設(shè)置行內(nèi)元素的垂直居中

div{height:30px; line-height:30px} /DIV內(nèi)的行內(nèi)元素均會垂直居中/

2.css設(shè)置塊級元素垂直居中

div{width:500px}

/DIV父容器設(shè)置寬度/

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

/塊級元素p也可以加個寬度，以達(dá)到相對于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;
}