css3

✍️ Tangxt ⏳ 2021-10-10 🏷️ CSS

04-height 深入理解-Float、Clear、BFC

资料：css 从入门到放弃 (4)-height 深入理解-float,clear,bfc_哔哩哔哩_bilibili

1）float 元素的特点

左浮和右浮除了方向不同，其余都一样

float

1、用代码测试 float 元素的特点

💡：float 导致父容器高度塌陷

<style>
  .father {
    border: 1px solid salmon;
    width: 400px;
  }

  .child {
    background-color: gold;
    color: black;
    border: 1px solid black;
  }

  .eg1 {
    width: 300px;
    height: 60px;
  }

  .float {
    float: left;
  }
</style>
<div class="demo">
  <div class="father">
    <div class="child eg1">
    </div>
  </div>
  son：300 × 60，father：400 × 62
</div>
<div class="demo">
  <div class="father">
    <div class="child eg1 float">
    </div>
  </div>
  son：300 × 60，father：400 × 0
</div>

高度塌陷

💡：float 元素块状化

块状化

💡： float 元素 width:auto 适应于内容

适应内容

2）float 定位-方向

从两方面分析 -> 竖直和水平

1、竖直方向

竖直方向

💡：没有任何元素时

<style>
  .father {
    border: 1px solid salmon;
    width: 400px;
    padding-top: 20px;
    height: 80px;
  }

  .child {
    background-color: gold;
    color: black;
    width: 200px;
    margin-top: 40px;
  }

  .float {
    float: left;
  }
</style>
<div class="demo">
  <div class="father">
    <span class="child">
      span 元素
    </span>
  </div>
</div>
<div class="demo">
  <div class="father">
    <span class="child float">
      span 元素
    </span>
  </div>
</div>

没有任何元素

💡：上面为 block 元素时

<style>
  .father {
    border: 1px solid salmon;
    width: 400px;
    height: 100px;
  }

  .child {
    background-color: gold;
    color: black;
    width: 200px;
    margin-top: 40px;
  }

  .float {
    float: left;
  }

  .box {
    background-color:lightgreen;
    margin-bottom: 20px;
    height: 20px;
  }
</style>

block 元素

💡：上面为 line box 时

line box

一个更明显的例子：

更明显的例子

至此，我们通过这三个例子，对于 float 元素在竖直方向上的定位，有了直观的了解……

2、水平方向

先走竖直，再走水平……

水平方向

💡：左边没有浮动元素时

只有一个浮动元素

包含块加padding-left：

加 padding-left

💡：左边有浮动元素时

一行有两个浮动元素，是先考虑放浮动元素，再考虑放其它正常流下的内联元素的！

浮动元素宽度较小时：

宽度较小

宽度较大时：

宽度较大

宽度非常大时：

宽度非常大

通过这三个例子，我想你可以很直观地感受到浮动元素飘动的过程……

3）float 对于后续元素的影响

这个比较重要

float

💡：block 和 block 作用

<style>
  .father {
    border: 1px solid salmon;
    width: 400px;
    height: 100px;
    color: black;
  }

  .first {
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
  }
  .second {
    background-color: gold;
    width: 200px;
    height: 40px;
  }
  .third {
    background-color: lightpink;
    width: 300px;
    height: 80px;
    margin-top: 20px;
  }

  .float {
    float: left;
  }
</style>

block block

💡：block 和 line box（空间充足）

空间充足

💡：block 和 line box（空间不足）

空间不足

💡：line box 和 block

line box 和 block

💡：line box 和 line box

line box 和 line box

👇：了解完浮动对后边元素的影响后，我们就得把它给清除掉，不然就会影响布局了！

4）清除浮动影响的办法

清除浮动

1、clear 的作用原理

作用原理

💡：clear 的效果示意图（无 margin）

clear

💡：clear 的效果示意图（有 margin）

clear

我再测试一下，把margin-top调成30px：

间隙

也就是说 clear 元素的margin-top也是有效果的！

总之，之所以 clear 能清除浮动是因为，它为 div 3 填充了一个空隙

2、BFC 的作用规则

IFC 是在某个领域下遵循的一些规则，而且这些针对内联元素的规则是很复杂的，有好几十个……

而 BFC 要简单多了！

BFC

💡：哪些情况下会产生 BFC？

BFC 产生

👇：对于 BFC，说一些比较实用的东西

💡：BFC 产生的效果

效果

👇：接下来看一些使用例子

💡：BFC 清除浮动影响

清除浮动影响

💡：BFC 解决 margin 重叠问题

重叠

解决这种重叠的姿势有很多……

💡：BFC 实现两栏自适应布局

两栏自适应布局

5）总结