浮动

1. 浮动样式的由来

2. 浮动样式的原理

• 普通文档流

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

  • 从上往下排列
  • 从左开始排列
  • 一个块元素占一行

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

3. 各种浮动情况

• 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>

4. 浮动元素父级高度塌陷

当父级元素没有设置高度时，高度会由文档流内容撑开。

而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。

解决高度塌陷方法：

• 方法1 — 子元素加clear

  在浮动元素后面加一个空的子元素，并给其CSS属性clear；

  <div style="clear:both"></div

  clear取值： left 清除左浮动 | right 清除右浮动 | both 清除所有浮动

• 方法2 — 父元素加宽高

  直接规定父元素的宽高，就不存在塌陷问题了。缺点是，得手动计算合适的宽高，并且扩展性不好。

• 方法3 — 父元素BFC(Block formatting context)化

  父元素满足下列条件之一即可：

  • 根元素
  • float属性不为none
  • position不为static和relative
  • overflow不为visible（较常用，通常设置overflow : hidden来解决高度塌陷）
  • display为inline-block / table-cell / table-caption / flex / inline-flex

• 方法4 — 父元素利用伪类after

  当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用，所有需要清除浮动的父元素加上一个相同的class名clear就可以解决：

  .clear{zoom: 1;}/*IE6,7不支持::after伪类，所以没法用下面的代码，这个神奇的zoom可以直接解决IE6,7的清除浮动问题*/
  .clear::after{ content: ""; display: block; clear:both; }

5. 补充

• 注意：元素浮动之后，不再支持margin:auto，只支持margin确切的值。

• 遇到父元素时浮动元素会停止不动。

• 设置浮动元素的上一个元素是普通文档流中的元素,元素相对于水平垂直位置不动。

• 推荐使用浮动来做横向布局而不是inline-block

  line-block布局的基线对齐处理较为麻烦，浮动不用担心这个问题；

  line-block布局空格会被解析显示在页面中，浮动不用担心这个问题。

• list-style:none;清除ul或ol的默认项目符号。

• min-width max-width

案例

• 美肤产品模块布局(opens new window)
• 网页布局结构练习(opens new window)
• 新浪导航(opens new window)
• 微信导航