【前端体系课】-- 元素浮动

元素浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它

最初只用于在一段文本内浮动图像, 实现文字环绕的效果
但是早期的 CSS 标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

可以通过 float 属性让元素产生浮动效果， float 的常用取值

none：不浮动，默认值
left：向左浮动
right：向右浮动

浮动规则一

元素一旦浮动后, 脱离标准流

朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

<style>
  body {
    margin: 0;
    overflow: 0;
  }
  .item1 {
      background-color: #f00;
  }
  .item2 {
    background-color: #0f0;
  }
</style>
----------------------------------------
<body>
  
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
  </div>

</body>

浮动前:

定位脱离标准流:

.item1 {
  /* 定位脱离标准流 */
    position: fixed;
  left: 0;
  top: 10px; 

  /* 脱离标准流 */
  /*float: left;*/
  background-color: #f00;
}

item1 浮动脱离标准流:

.item1 {
  /* 定位脱离标准流 */
    /*position: fixed;
  left: 0;
  top: 10px; */

  /* 脱离标准流 */
  float: left;
  background-color: #f00;
}

item1 item2 同时浮动:

.item2 {
  float: right;
  background-color: #0f0;
}

.item2 {
  float: left;
  background-color: #0f0;
}

item1 和 item2 的父元素 div 居中时:

.box {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 0 auto;
  padding: 10px;
}

定位元素会层叠在浮动元素上面

浮动规则二

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

上面演示过

浮动规则三

浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

浮动规则四

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

比如行内级元素、 inline-block 元素、块级元素的文字内容

浮动规则五

行内级元素、 inline-block 元素浮动后，其顶部将与所在行的顶部对齐

高度塌陷

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

清浮动的目的是

让父元素计算总高度的时候，把浮动子元素的高度算进去

解决:

使用 CSS 属性 - clear

clear 属性可以指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面

常用取值:

left：要求元素的顶部低于之前生成的所有左浮动元素的底部
right：要求元素的顶部低于之前生成的所有右浮动元素的底部
both：要求元素的顶部低于之前生成的所有浮动元素的底部
none：默认值，无特殊要求

小结

清除浮动的方法

方法一: 给父元素设置固定高度
- 扩展性不好（不推荐）
方法二: 在父元素最后增加一个空的块级子元素，并且让它设置 clear: both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）
方法三: 给父元素添加一个伪元素 after
- 编写好后可以轻松实现清除浮动 (推荐)

布局小结: