【html/css】从清除浮动讲解 BFC 原理及应用

最新推荐文章于 2022-04-02 10:03:48 发布

@Umbrella

最新推荐文章于 2022-04-02 10:03:48 发布

阅读量239

点赞数 1

分类专栏：【html5/css3】文章标签： BFC

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/101103148

版权

【html5/css3】专栏收录该内容

26 篇文章 0 订阅

订阅专栏

CSS中清楚浮动

在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼

1 浮动带来布局的便利，却也带来了新问题

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Clear float</title>
 6     <style type="text/css">
 7         .container{
 8             margin: 30px auto;
 9             width:600px;
10             height: 300px;
11         }
12         .p{
13             border:solid 3px #a33;
14         }
15         .c{
16             width: 100px;
17             height: 100px;
18             background-color: #060;
19             margin: 10px;
20             float: left;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <div class="p">
27             <div class="c"></div>
28             <div class="c"></div>
29             <div class="c"></div>
30         </div>
31     </div>
32 </body>
33 </html>

我们希望看到的效果是这样的
在这里插入图片描述
但结果却是这样的

父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，我们需要一些清除浮动的技巧。
详细的清楚浮动方法可以 → 猛戳这里CSS清除浮动方法了解

2 如何清理浮动

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

2.1 利用 clear属性，清除浮动

clear属性是个什么东东呢？clear 属性规定元素的哪一侧不允许其它之前浮动元素，修改一下刚才代码

<div class="p">
    <div class="c"></div>
    <div class="c" style="clear:left;"></div>
    <div class="c"></div>
</div>

在这里插入图片描述
第二个div添加了clear:both属性后，其左侧的div（第一个div）不再浮动，所以后面的div都还行(huan hang)了。我们可以利用这点儿在父容器的最后添加一个空的div，设置属性clear:left，这样就可以达到我们目的了。

2.1.1 添加空div清理浮动

对我们刚才代码稍作修改

<div class="p">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <div style="clear:left;"></div>
</div>

图示如下：
在这里插入图片描述
2.1.2 使用CSS插入元素

上面的做法浏览器兼容性不错，但是有个很大的问题就是向页面添加了内容来达到改变效果的目的，也就是数据和表现混淆，既然是变现，看看怎么使用CSS来解决这一问题。根本的做法还是向父容器最后追加元素，但我们可以利用CSS的:after伪元素来做此事。

添加一个类 floatfix

.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}

对父容器添加此类，这样我们就可以看到正确效果了

在这里插入图片描述
2.1.3 简介之道（可以了解）

Nicolas Gallagher 在 A new micro clearfix hack 中提供了一种看起来更清爽的做法

有同学会提出来了上面方法看起来不错，但是IE6、7不支持伪元素怎们办？这就需要我们使用BFC/haslayout的姿势了

2.2 使父容器形成BFC

经过了前些日子园里关于BFC的狂轰滥炸相信大家都对BFC有了一定的了解，不过瘾的同学可以看看 Block Format Content，BFC有三个特性

BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
BFC不会重叠浮动元素
BFC可以包含浮动

我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC

float为 left | right
overflow为 hidden | auto | scroll
display为 table-cell | table-caption | inline-block
position为 absolute | fixed

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

2.2.1 利用float来使父容器形成BFC

<div class="p" style="float:left;">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

这样我们可以得到结果

在这里插入图片描述

我们可以看到父容器高度没有塌陷，但是长度变短了，因为div应用float‘后会根据内容来改变长度，这个在很多时候很有用，但是我们不希望有这种效果怎么办？

2.2.2 使用BFC的其它局限

上面提到使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？难道要全部使用folat吗（确实有这种布局方式倒是）。BFC的几种方式都有各自的问题，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。

看起来还是第一种方式比较好，可是低版本IE该怎么办呢？

2.2.3 hasLayou

我们知道在IE6、7内有个 hasLayout 的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true

3 一个相对靠谱的解决方案

经过上面的比较我们可以得出一个相对靠谱的解决方案

在IE+、现代浏览器上使用伪元素
在IE6、7使用hasLayout

具体应该使用哪种方式来使元素hasLayout为true呢？相对而言zoom：1比较好，因为不会造成其它影响。想造成只在IE6、7上使用某些CSS的效果，我们还得需要一些CSS hack的知识，感兴趣同学可以看看 CSS hack，我们可以写出这样的CSS

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

虽然我们得出了一种浏览器兼容的靠谱解决方案，但这并不代表我们一定得用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性了，大家要掌握原理，活学活用。总而言之清理浮动两种方式

一、常见定位方案

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定

二、BFC 概念

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

三、触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

四、BFC 特性及应用

1. 同一个 BFC 下外边距会发生折叠

<head>
<style>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</style>
</head>
<body>
    <div></div>
    <div></div>
</body>

在这里插入图片描述
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

这时候，两个盒子边距就变成了 200px
在这里插入图片描述
2. BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

在这里插入图片描述
由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

效果如图：
在这里插入图片描述
3. BFC 可以阻止元素被浮动元素覆盖

先来看一个文字环绕效果：

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

在这里插入图片描述
这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)。

结语

关于从清楚浮动引出的BFC以及BFC的核心讲解，希望可以帮到你，over~

@Umbrella

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【html/css】从清除浮动讲解 BFC 原理及应用

CSS中清楚浮动在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...
复制链接

扫一扫