css——浮动1

1. 浮动样式的原理

• 普通文档流

  浏览器在默认情况下规定一个块元素在父元素内的排列规则：

  • 从上往下排列

  • 从左开始排列

  • 一个块元素占一行

  <style>
      .parent{width:800px; height:400px; border:10px solid blue;}
  ​
      .box1{width:250px; height:80px; background-color:#ed7d31;}
      .box2{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>

  

• 浮动之后的文档流

  <style>
      .parent{width:800px; height:400px; border:10px solid blue;}
  ​
      .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
      .box2{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>