清除浮动的几种方法

浮动带来的问题

一个元素设置了浮动之后，就脱离了标准流(漂浮在标准流之上)，因此如果他的父级容器在此时没有设置固定的高度，即由内容撑开，就会导致父级容器不能被撑开。而此时与父级容器同级的其他元素就会上移占据父级容器的位置。即高度塌陷。

清除浮动的方法

（1）定高法：强行给父元素添加一个固定的高度；缺点：高度固定，导致后期不好维护。

（2）额外标签法：在最后一个元素后面添加一个空的块级元素（div），给该元素添加clear：both属性;该方法可以实现高度自适应，但每清除一次浮动，就要添加一个额外的标签，增加代码冗余。

（3）伪元素清除浮动法：将清除浮动的相关代码写在.clearfix类中，给浮动元素的父元素添加.clearfix类即可

   .clearfix:before,
    .clearfix:after {
      content: "";
      /* 由于伪元素默认显示模式是行内模式   所以要转换 */
      display: table;
    }
    .clearfix:after {
      /* 清除浮动 */
      clear: both;
    }

（4）overflow:hidden/auto清除浮动：给浮动元素的父元素添加overflow：hidden/auto即可，但是该方法的使用有局限性，在有些场景里不能使用。例如：如果有一个元素基于父元素定位，并且是定位在父元素盒子的外面，那么此时使用overflow：hidden清除浮动，也会将定位元素清除掉。

清除浮动方法的实质

上述清除浮动的方法实际上可以分为两类：一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空的块级元素（div），其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使得该父元素可以包含浮动元素。

什么是BFC

BFC：块级格式化上下文，是一个独立的渲染区域，简单的理解就是一个独立的盒子，这个盒子里的布局不会受到外部的影响，也不会影响外部元素。

BFC规则

（1）内部的Box会在垂直方向上一个接一个的放置

（2）垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）

（3）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

（4）BFC的区域不会与float的元素区域重叠

（5）计算BFC的高度时，浮动子元素也参与计算 =>解决元素高度塌陷问题

（6）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

常见触发BFC的方式

（1）float的值不为none；

（2）overflow的值不为visible；

（3）display的值为inline-block、table-cell、table-caption 和table；able也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

（4）position的值为absolute或fixed

来源：https://www.cnblogs.com/s-w-f/p/11921544.html

标签

bfc