十一天

<style>
  .wrapper {
    width:600px;
    margin:0 auto;      //居中
    border:1px solid #666;
  }
  .box1,.box2 {
    width:200px;
    height:150px;
  }
  .box1 {
    background-color:#f00;
    float:left;                                           //加浮動(dòng)float后，可以使塊級(jí)標(biāo)簽不獨(dú)占一行
  }
  .box2 {
    background-color:#ff0;
    float:right;
  }
</style>


<div class="wrapper">
  <div class="box1">box1</div>             //div屬于塊級(jí)標(biāo)簽會(huì)獨(dú)占一行
  <div class="box2">box2</div> 
</div>

<style>
  .wrapper {
    width:600px;
    margin:0 auto;
    border:1px solid #666;
  }
  .box1,.box2,.box3 {
    width:200px;
    height:150px;
  }
  .box1 {
    background-color:#f00;
    float:left;                                         
  }
  .box2 {
    background-color:#ff0;
    float:right;
  }
  .box3 {
    background-color:#fff;//浮動(dòng)后，后面的元素不管是塊級(jí)元素還是行級(jí)元素，不會(huì)顯示在下一行
  }
</style>


<div class="wrapper">
  <div class="box1">box1</div>            
  <div class="box2">box2</div> 
  <div class="box3">box3</div> 
</div>

<style>
  .wrapper {
    width:600px;
    margin:0 auto;
    border:1px solid #666;
  }
  .wrapper:after {                  //方法三：父級(jí)添加偽元素
    content:"";
    display:block;
    clear:both;
  }
  .box1,.box2,.box3 {
    width:200px;
    height:150px;
  }
  .box1 {
    background-color:#f00;
    float:left;                                         
  }
  .box2 {
    background-color:#ff0;
    float:right;
  }
  .clear {
    clear:both;                      //方法一：清除浮動(dòng)
  }
  .box3 {
    background-color:#fff;//浮動(dòng)后，后面的元素不管是塊級(jí)元素還是行級(jí)元素，不會(huì)顯示在下一行
  }
</style>


<div class="wrapper">
  <div class="box1">box1</div>            
  <div class="box2">box2</div> 
  <div class="clear"></div>          //方法一：清除浮動(dòng)
  <div class="box3">box3</div> 
</div>

<div class="wrapper" style="overflow:hidden;">      //方法二：父級(jí)添加樣式
  <div class="box1">box1</div>            
  <div class="box2">box2</div> 
</div>
  <div class="box3">box3</div> 

.info-show{
  width: 600px;          //實(shí)際開(kāi)發(fā)不給高度
  padding: 20px;          //邊框
  border: 1px solid #ccc;
  margin: 0 auto;
}
.head-sculpture{
  float: left;
  text-align: center;        //合二為一
  margin-right: 20px;
}
.head-sculpture .photo{
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  //text-align: center;            //文本居中
  display: table-cell;
  vertical-align: middle;       //垂直居中
}
.head-sculpture .name{
  //text-align: center;     
}
.description{
  width: 350px;
  height: 290px;
  border: 1px solid #ccc;  
  float: left;
  padding: 10px 0 0 20px;     //上 右 下 左
}


<div class="info-show">
  <div class="head-sculpture">
    <div class="photo">頭像</div>
    <div class="name">姓名</div>
  </div>
  <div class="description">描述</div>
</div>