浮动与清除浮动的六种方法

Posted 2023-04-26

参考技术A

css中,一共给我们了三种布局方式

标准文档流
浮动(float)
定位(postion)

在元素进行浮动后,会出现父元素没有高度的情况,下面的内容会直接弹到上面的div盒子下面, 这是因为元素浮动后脱离了标准流 ,父盒子无法检测到子元素,于是高度变成了0

我们需要清除浮动

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

方法1:固定宽高
给浮动的元素添加父级div盒子,再给父级盒子设置高度

方法2:一起浮动
父元素也添加浮动,这样父元素也脱离文档流

方法5:父级添加双伪元素
:after 方式是额外标签法的升级版。给父元素添加：

方法6.父盒子添加overflow: hidden;触发BFC
方法简单,常用

BFC Block fomatting context（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

简单来说:bfc是创建了一个单独的区域,容器外的元素绝对无法影响到bfc内部的元素

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

在布局中经常出现,两个相邻的盒子,上面盒子设置了 margin-bottom: 20px,下面盒子设置了margin-top: 30px;本来期望是20+30=50px,但在使用时并不是求和,而是取最大值,最后变成了50px

这时我们可以设置bfc来实现隔离开元素,防止他们相互影响

解决方案

1.用一个大盒子包住下面的盒子,设置大盒子是padding-top

2.使用一个大盒子包住下面的盒子,设置是overlow,触发bfc

在PC端布局中,常见左侧宽度固定,右侧随浏览器的变化而自适应,通常是将左侧栏浮动来实现的,右侧使用block来自动填满内容,但是随着右侧内容满了,就会挤到左侧底部

但我们只要为右侧大盒子触发bfc,触发后就是一个单独的空间,绝对不会挤到左侧去

在布局中经常出现子元素浮动了,父元素检测不到子元素的高度而坍塌高度变成0,这时我们需要清除浮动,而原理就是用BFC形成一个独立的空间,而空间内的浮动元素也被重新计算高度撑开盒子

学习笔记：清除浮动的原理（BFC与hasLayout）

利用元素浮动来布局相信大家已经不再陌生了，但浮动会带来高度塌陷的问题（这里就不详诉了，有兴趣的朋友可以自行搜索）。既然浮动会带来不好的影响，那我们就需要去解决这个问题。其实清除浮动带来的影响也就是我们常说的”清除浮动”的方法非常简单，网上随便一搜就知道了，但大部分像我这样的菜鸟都不知道背后的原理是什么。所以今天我主要是谈谈清除浮动背后的原理。

要了解清除浮动的原理，首先我们要了解BFC这个名词。

BFC(Block Fomatting Context)

BFC,翻译过来就是”块级格式化上下文”。它有三个特性：

1. BFC会阻止垂直外边距(margin-top、margin-bottom)的重叠。当元素同属于一个BFC时，两个元素才可能发生垂直外边距的重叠。
2. BFC不会重叠浮动元素。
3. BFC可以包含浮动。

了解了上面的三个特性之后，那我们就可以利用BFC的第三条特性来清除浮动。这里说清除浮动并不是更合适，应该说包含浮动，也就是父容器变成BFC就可以了。那如何形成BFC呢，有如下方法。

1. 根元素
2. float为 left 或 right
3. overflow为 hidden|auto|scroll
4. display为 table-cell|table-caption|inline-block|flex|inline-flex
5. position为 absolute|fixed

因此，我们可以为浮动元素的父容器添加上面这些属性来形成BFC达到清除浮动的效果。但上面所有这些方法都有局限性，我们不可能为所有的父容器都添加float属性（虽然现实中确实有网页是这么做的）；overflow属性会影响滚动条和绝对定位元素；diaplay很多属性低版本IE并不支持（珍爱生命，远离IE）；position影响元素的定位，会出现我们不想要的效果。

hasLayout

我们知道在IE6、7有个hasLayout的概念，很多bug的源头正是它。

• 当元素的hasLayout属性值为flase的时候，元素的尺寸和位置由其最近的祖先元素控制。
• 当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责自身及其子元素的尺寸的定位。

我们可以利用这点在IE6、7下完成清除浮动，首先我们要先看看如何使元素hasLayout为true。

• position： absolute
• float： left|right
• display： inline-block
• width： 除auto外
• height： 除auto外
• zoom： 除normal外
• 在IE7中使用overflow： hidden|auto|scroll 也可以

BFC清除浮动

综上，我们就可以得出利用BFC清除浮动的方法：

 1 .clearfix{
 2    *zoom:1;
 3 }
 4 .clearfix:after{
 5     content:".";
 6     display:block;
 7     height:0;
 8     visibility:hidden;
 9     clear:left;
10 }

或

1 .clearfix{
2     *zoom:1;
3 }
4 .clearfix:after{
5     content:"";
6     display:table;
7     clear:both;
8 }

 

上面就是得出的两种浏览器兼容的方案。总之，清除浮动就两种方式

1. 利用 clear 属性，清除浮动
2. 使父容器形成BFC

今天，我们谈的是第二种的方法背后的原理，至于第一种是不涉及的。