CSS 清除浮动原理详解

CSS 清除浮动原理详解

一. 浮动float

float属性的本质是用来实现文字环绕效果的。
它有一个很大的副作用：会导致父容器的高度坍塌

疑问：

1. 那么将父容器固定高度有用吗？
   没用，因为只要浮动元素的区域超过了这个高度，依旧会出现环绕效果影响布局

那么怎么解决这个问题呢？
清除浮动方法很多，但本质上只有两种方法

1. 使用clear清除浮动
2. 形成BFC

1.1 使用clear清除浮动

clear 属性是 CSS 专门用来处理 float引起的高度坍塌问题

语法：

clear: none | left | right | both

使用clear: both就可以, left和right可以完全被替代

使用clear要注意的地方

1. clear只会清除自身所在前面的元素的浮动
2. clear属性只作用在块级元素上

因为clear只会清除前面元素的浮动，因此我们要在容器的最后面添加一个块级元素，并让该元素使用clear: both属性

最常见的做法就是在父容器身上使用::after

#container::after { 
    content: "";
    display: block; 
    clear: both;
}

因为clear只作用在块级元素上, ::after等伪元素都是内联的
所以我们要加上这两行

content: "";
display: block;

1.2 使用BFC清除浮动

BFC全称为 block formatting context, 中文为"块级格式化上下文"

性质：如果一个元素触发了 BFC , 那么该元素会形成一个独立容器, 不会影响到外界元素
只要触发了 BFC , 元素就不会因为 float 引起高度坍塌

如何触发BFC
以下规则只要满足任意一条，即可触发

1. 根元素
2. float 的值不为 none
3. overflow 的值为 auto、scroll 或 hidden
4. display 的值为 table-cell、table-caption 和 inline-block 中的任何一个
5. position 的值不为 relative 和 static

BFC的一些特性

1. 计算BFC高度时，浮动元素也会参与计算(用来解决父元素高度塌陷问题）
2. 是一个独立的容器，外面元素不会影响他里面的元素
3. BFC元素不会与浮动元素的盒子相互重叠（解决兄弟元素排版混乱问题）