09-浮动

浮动

• 概念：由W3C提出的一种布局模式，可以让块级元素进行同行显示

• 语法：

  float:left|right|none
  

  • left：左浮动
  • right：右浮动
  • none：默认值，表示不浮动

• 特点

  • 浮动元素可以同行显示，盒子排列不下时自动换行显示，兼容性好

  • 浮动元素会脱离文档流，按照自己的规则进行页面排列

    • 第一个浮动元素找到父盒子的边界停靠，后面浮动元素依次找到前面浮动元素的边界进行停靠

  • 浮动元素会在当前位置脱离文档流，不影响前面标准文档流的排列

  • 浮动元素原本的位置不再占用，显示在标准文档流之上

  • 块级元素浮动之后，如果没有设置宽度，则宽度由内容撑开；行级元素浮动之后支持宽高设置。

• 浮动的影响

  • 早期用于图文混排，会把非浮动元素的文本信息进行挤压

  • 造成父盒子高度塌陷

    • 给父盒子固定高度
    • 给父盒子设置overflow:hidden，利用BFC容器的特点

清除浮动

• 清除浮动元素对于非浮动元素的影响

  clear:left|right|both
  

  • left：清除左浮动带来的影响
  • right：清除右浮动带来的影响
  • both：清除所有浮动带来的影响

解决高度塌陷问题

• 推荐使用伪元素清除浮动影响：将类名设置给高度塌陷的盒子即可

  .clearfix::after{
      content: "";
      display: block;
      clear: both;
  }
  

文档流

• 标准文档流：在页面排列中，所有元素按照从上到下，从左到右进行排列。块元素独占一行，行元素共享一行的规则排列。
• 脱离文档流：在页面排列中，元素不再遵守标准文档流的规则排列，按照自己的规则进行排列。