css——浮动2

2.各种浮动情况

• box1 box2 都浮动

  box1 box2不再遵循普通文档流的占据一行规则，变得可以水平排布。box3往上占据空出来的文档流位置。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
    .box2{float:left; width:400px; height:100px; background-color:#70ad47;}
    .box3{width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  

• box1 box2 box3都浮动

  box1 box2 box3都脱离原来的文档流，水平排布，但是因为父级宽度不够，所以box3换行显示。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
    .box2{float:left; width:400px; height:100px; background-color:#70ad47;}
    .box3{float:left; width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  

• box1 box2 box3都浮动，box1高度比box2高

  同上box3会换行显示，但是在过程中会被box1“卡住”。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:left; width:250px; height:100px; background-color:#ed7d31;}
    .box2{float:left; width:400px; height:80px; background-color:#70ad47;}
    .box3{float:left; width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  

• box1 box2向右浮动，box3 box4向左浮动

  各自按照对应的方向排列。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:right; width:150px; height:100px; background-color:#ed7d31;}
    .box2{float:right; width:150px; height:80px; background-color:#70ad47;}
    .box3{float:left; width:150px; height:200px; background-color:#7030a0;}
    .box4{float:left; width:150px; height:150px; background-color: #9293a3;}
  </style>
  <div class="parent">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>

  

• 图文环绕

  不给img加浮动情况下，图片的底端会与第一行文字的底端对齐。给img加浮动之后，可以实现图文环绕的布局效果。

  <style>
    .parent{width:435px; height:400px; border:10px solid blue;}
    img{float: left;}
  </style>
  <div class="parent">
    <img src="http://static.zzhitong.com/lesson-files/html/img/9-10.jpg" height="210" alt="">
    豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。
  </div>