html5清除浮动的作用,浮动、BFC以及清除浮动

BFC(Block Formatting Context)是CSS布局中的一种概念,用于创建独立的布局环境。它涉及浮动元素、绝对定位元素、非块级元素的块级容器以及overflow值非visible的元素。BFC的主要特点是防止外边距折叠、避免与浮动元素重叠以及包含浮动。通过创建BFC,可以用来清除浮动、实现特定布局效果。例如,使用`overflow:hidden`可以防止文字环绕并清除父元素的浮动。此外,BFC在解决布局问题上具有重要作用,如左侧固定、右侧100%宽度的布局等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是BFC

BFC全称Block Formatting Context,意思是块级格式上下文,它是一个独立的布局环境,一个BFC中的元素布局不受外界的影响。

W3C中关于BFC的定义:

浮动元素、绝对定位元素、非块级元素的块级容器(如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为visiable的元素,都会为他们的内容创建新的BFC(块级格式上下文)。

PS:与之类似的还有一个叫层叠上下文stacking context的东西。

形成一个BFC的条件浮动元素(float为left或者right);

绝对定位元素(position 的值为absolute或fixed);

非块级元素的块级容器(display 的值为inline-block、table-cell、table-caption、flex,inline-flex)

overflow 的值不为 visible;

创建BFC最常见的做法是使用overflow:hidden,因为它几乎不会造成任何负面影响。

BFC的特点同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并(即上面元素的margin-bottom和下边元素的margin-top会合并,当二者不一致时将以最大的那个外边距为准);

BFC不会与浮动元素重叠(overflow:hidden可以实现左侧固定右侧100%效果利用的就是这个特性);

BFC可以包含浮动(给父容器设置overflow:hidden可以清除浮动利用的就是这个特性);

在BFC中,每个盒子的margin-left紧挨着包含块的border-left(从右到左的格式,则为紧挨右边框)。

BFC的用途

使用BFC来防止外边距折叠

上面我们知道,同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并,如果他们属于不同的BFC,他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。

使用BFC清除浮动

清除浮动通常使用clear:both来实现,但也可以通过创建一个BFC来清除浮动(通常的做法是给浮动父元素设置overflow:hidden)。

使用BFC实现左侧固定右侧100%的布局

.clear-float:after {content: ''; display: block; clear: both;}

.aside {float: left; width: 300px; background: #F6D3FF; height: 200px; margin-right: 10px;}

.content { overflow: hidden; zoom: 1; background: #FFD5B1; height: 200px;}

左侧浮动,宽度固定300px

右侧overflow:hidden

使用BFC来防止文字环绕

这个其实和上面是一样的道理。浮动元素会形成文字环绕,这本来是好事,但是偏偏有时候可能不想让文字环绕,此时可以通过给文字元素创建BFC来阻止。

默认情况:

.container { width: 230px; height: 200px; border: solid 2px #00F;}

.float { width: 100px;height: 100px;background: #ccc;float: left;margin: 5px;}

我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字。

617f30cf07b839c0118f4d5814bb7989.gif

清除文字环绕:

.container { width: 230px; height: 200px; border: solid 2px #00F;}

.float { width: 100px;height: 100px;background: #ccc;float: left;margin: 5px;}

p{overflow:hidden;}

我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字。

617f30cf07b839c0118f4d5814bb7989.gif

浮动

默认情况下,浮动会造成父元素的高度塌陷,所以我们要清除浮动。

清除浮动的几种方法

清除浮动一般有两种思路

利用 clear属性,清除浮动

使父容器形成BFC

具体一点有如下几种方式:

在最后面追加空白元素(如
)添加clear:both添加clear:both;

使用伪元素.clearfix{content:'';display:block;clear:both;};

父元素也跟着浮动,但是这样又会造成父元素的父元素高度塌陷,所以不推荐;

创建BFC,如给父元素设置overflow:hidden;

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值