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;
}
