CSS之BFC详解

xiaoxiao2025-10-06 14

在了解BFC前，首先需要知道它是什么，它有哪些特性，它是如何形成的。

一、什么是BFC

BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、BFC的特性

内部的box会在垂直方向，一个接一个的放置；box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠；bfc的区域不会与浮动区域的box重叠；bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，里面的也不会影响外面的；计算bfc高度的时候，浮动元素也会参与计算。

三、如何形成BFC

渲染float属性不为none（脱离文档流）；position为absolute或fixed（脱离文档流）；display为inline-block,table-cell,table-caption,flex,inine-flex；overflow不为visible（为 hidden、auto、scroll时）。

四、应用场景

防止垂直margin重叠；自适应两栏、三栏布局；清除内部浮动。

五、案例

1、防止垂直边距重叠

垂直边距重叠示例：常规两个盒模型上下边距会重叠，取两者边距最大值，如下图所示：

防止上下box垂直边距重叠：这里用float产生BFC，当然还有其它方式也可以产生同样效果，这里就不一一举例了。

2、两栏布局

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .left{ float:left; width:200px; background-color:red; min-height:100%; height:300px; } .right{ overflow:hidden; background-color:green; height:300px; } </style> </head> <body> <h1>左右布局，左侧固定宽度200px,右侧宽度自适应</h1> <div class="left"></div> <div class="right"></div> </body> </html>

3、清除浮动

清除浮动案例1：

图文环绕：img标签采用float:left浮动在左侧，覆盖在p标签上方。

用BFC防止文字环绕图片：为文字标签添加overflow:hidden，产生BFC效果

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img{ float:left; width:100px; height:100px; border:solid 1px #666; } </style> </head> <body> <div class="img-txt"> <img src="https://img02.sogoucdn.com/app/a/100520021/B78C3A9378E757CBB073D97E8B4E7062"> <p style="overflow:hidden">好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~ 好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~</p> </div> </body> </html>

清除浮动案例2：

浮动元素不能撑起处于标准文档流中父层容器的高度，添加overflow:hidden 可清除浮动

实例：一个父容器有两个浮动的子容器，该父容器的高度没有被子容器撑起，高度为0，宽度为行宽，如下图所示

为父容器添加overflow:hidden，清除浮动后，它的高度为子容器撑起的高度，宽度为行宽，如下图所示

为父容器添加float:left使它浮动，它的宽高为子容器撑起的宽高，如下图所示：

转载请注明原文地址: https://www.6miu.com/read-5037448.html

Java

最新回复(0)