CSS之BFC详解

叁歲伎倆 2022-05-13 19:12 195阅读 0赞

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

## 一、什么是BFC ##

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

## 二、BFC的特性 ##

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

## 三、如何形成BFC ##

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

## 四、应用场景 ##

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

## 五、案例 ##

### 1、防止垂直边距重叠 ###

**垂直边距重叠示例**：常规两个盒模型上下边距会重叠，取两者边距最大值，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70]

**防止上下box垂直边距重叠**：这里用float产生BFC，当然还有其它方式也可以产生同样效果，这里就不一一举例了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 1]

### 2、两栏布局 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 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标签上方。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 3]

**用BFC防止文字环绕图片**：为文字标签添加overflow:hidden，产生BFC效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 4]

**代码如下**：

<!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，宽度为行宽，如下图所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 5]

为父容器添加overflow:hidden，清除浮动后，它的高度为子容器撑起的高度，宽度为行宽，如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 6]

为父容器添加float:left使它浮动，它的宽高为子容器撑起的宽高，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70]: /images/20220504/c5c7a46406e34ab8b21327bb36003f4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 1]: /images/20220504/933b423b1fab46799ae1b6dd85b84da8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 2]: /images/20220504/87c0022dddca4781a74b2a67ad363a3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 3]: /images/20220504/1c8ca276979a43888c9a24dcfc634d2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 4]: /images/20220504/f31d1e59e77d415999282135253a9f62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 5]: /images/20220504/92ab9148925e41e3bed5ba8cdaad822a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 6]: /images/20220504/9f28bcffd44943de8f64377d0cca369f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_27_color_FFFFFF_t_70 7]: /images/20220504/1e414db33f794f51b17bccdeb49daa65.png