【CSS】如何清除浮动的影响、BFC

最新推荐文章于 2023-12-02 17:38:35 发布

水草123

最新推荐文章于 2023-12-02 17:38:35 发布

阅读量640

点赞数 4

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43790653/article/details/122577690

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS如何清除浮动的影响、BFC

参考文章：
1.清除浮动： https://segmentfault.com/a/1190000041226085
https://blog.csdn.net/m0_59897687/article/details/122522929
2.浮动与绝对定位： https://blog.csdn.net/csdn_ds/article/details/75145682
3.box-shadow： https://www.cnblogs.com/dongtianee/p/4545340.html
4.BFC相关： https://blog.csdn.net/sinat_36422236/article/details/88763187
https://blog.csdn.net/qq_35430000/article/details/96436915

1.场景

举个例子，想实现如下效果:
在这里插入图片描述
自然会想到用float浮动使两个div在同一行，代码如下：

<style>
    .box{
        padding: 5px;
        width: 500px;
        background-color: rgb(244, 252, 225);
        border: 1px solid #000;
    }
    .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: red;
        float: right;
    }
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

但此时会出现高度坍塌现象，效果如下：
在这里插入图片描述
关于浮动的详细特点介绍可参考https://blog.csdn.net/m0_59897687/article/details/122522929

2.产生这种现象的条件：

（1）父元素没有设置高度，高度由内容撑开
（2）子元素设置了浮动——float

3.产生这种现象的原因：

元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，将无法撑起父元素的高度，使父元素高度丢失。之后的还在文档流中的元素会自动上移，导致页面的布局混乱。出现父元素高度坍塌的现象。

4.解决办法：

这里总结6种方法，并分别列出缺点

（1）将父级元素也设置为浮动

<style>
	.box{
	        padding: 5px;
	        width: 500px;
	        background-color: rgb(244, 252, 225);
	        border: 1px solid #000;
	        float: left;
	 }
</style>

缺点：并没有从根本上解决问题，父级浮动可能又会影响爷爷级的布局，由此向上可能造成全部层级都需要调整。

（2）给父级元素增加定位absolute

<style>
	.box{
        padding: 5px;
        width: 500px;
        background-color: rgb(244, 252, 225);
        border: 1px solid #000;
        position: absolute;
    }
</style>

缺点：也没有从根本上解决问题，因为position: absolute; 也会脱离文档流，与第一种情况一样。

拓展：float浮动与绝对定位absolute的区别，参考https://blog.csdn.net/csdn_ds/article/details/75145682

（3）给父级元素设置相应的高度

<style>
	.box{
        padding: 5px;
        width: 500px;
        height: 100px;
        background-color: rgb(244, 252, 225);
        border: 1px solid #000;
    }
</style>

缺点：不够灵活。高度需要随内容的改变而修改。

（4）给父级元素设置overflow: hidden;

overflow: hidden; 表示溢出隐藏，给某个元素设置overflow: hidden;后，该元素的内容若超出了给定的宽度和高度属性，超出的部分将会被隐藏，不占位。

<style>
	.box{
        padding: 5px;
        width: 500px;
        background-color: rgb(244, 252, 225);
        border: 1px solid #000;
        overflow: hidden;
    }
</style>

缺点：虽然解决了浮动的影响，但是会造成原来的一些内容被隐藏掉，比如：
1 盒子阴影

<style>
	.box{
        padding: 5px;
        width: 500px;
        background-color: rgb(244, 252, 225);
        border: 1px solid #000;
        overflow: hidden;
    }
    .left{
        width: 100px;
        height: 100px;
        background-color: red;
        box-shadow: 10px 10px 5px #aaa;
        float: left;
    }
</style>

在这里插入图片描述
阴影偏移都是10px，但box的下边距只有5px，下阴影超出了box范围，在overflow: hidden; 的影响下只显示了一部分。

拓展： 阴影在盒子外面，不占用盒子的布局空间，不算入盒子的总宽度和高度，所以不会撑大父元素，就会出现被遮盖现象。但相邻阴影之间可以遮盖。
参考文章：https://www.cnblogs.com/dongtianee/p/4545340.html

2 当文本过长，且包含过长英文时，会出现英文文本被隐藏的情况

<div class="box">
     <div class="left"></div>
     <div class="right"></div>
     <div>csscsscsscsscsscsscsscsscsscsscsscsscsscsscsscss123123123css1css2css3css4</div>
</div>

在这里插入图片描述

拓展： 在div css布局中，中文文字在div或任意盒子中超出设置宽度均会自动换行，但是遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。且中文后面接英文时，英文会另起一行。因此当设置溢出隐藏时，超出部分内容则会自动隐藏，可以通过设置word-wrap:break-word实现自动换行。

（5）末尾增加空元素进行清除

直接在末尾添加一个空的div并对其设置clear: both;

<style>
	.voidDiv{
        clear: both;
    }
</style>
<body>
	<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="voidDiv"></div>
    </div>
</body>

clear可能的值包括：
在这里插入图片描述这里clear: both; 就表示该元素的两侧都不允许出现浮动元素，那他只能往下移，进而撑开了父级盒子的高度。

缺点：增加了一个空标签，结构冗余，会增加页面的渲染负担，不过影响较小。

（6）使用伪类元素

使用伪类元素向末尾添加一个新的元素并将其设置为块元素并设置clear: both;

<style>
	.box::after{
        content: '';
        display: block;
        clear: both;
    }
</style>

与（5）原理类似，都是在末尾添加一个没有内容的空元素，对其设置clear: both; 但是伪元素不会出现在DOM中，不会改变文档内容，不是真正的元素。
总结：最常用的清除浮动的方式就是使用伪类元素。

5 BFC（Block Formatting Context）块格式化上下文

其实在我们写页面的过程中，经常会用到BFC的知识，只是不知道这个就属于BFC。

（1）BFC的主要特征

BFC就是页面上的一个独立的容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到容器内的子元素。
内部的Box会在垂直方向上一个接一个的放置。（可以理解成块元素独占一行）
盒子垂直方向的距离由margin决定，同一个BFC中的父子元素或相邻兄弟元素垂直方向上外边距margin会重叠。（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块。）
BFC的区域不会与float box重叠。
计算BFC的高度时，浮动元素也参与计算。

这里1.2.4.都没什么特殊的，主要注意3.5.6.

（2）BFC的触发条件

根元素，即HTML标签
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid
定位元素：position值为 absolute、fixed

（3）BFC的应用场景

①解决外边距margin重叠问题

根据第3条特征，属于同一个BFC的相邻盒子的上下margin会发生折叠。我们可以让这两个盒子分别位于两个不同的BFC中，则可以有效的避免外边距塌陷的问题。

<style>
    .box1{
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box2{
        margin-top: 10px;
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述
如图所示，发生了margin重叠现象。现在两个盒子同处于body盒子中，环境一致。根据BFC，将两个盒子设置为两个不同BFC环境下的盒子，即可解决该问题。因此可以采用：

给box2设置浮动，触发box2的BFC：

<style>
    .box2{
        margin-top: 10px;
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
    }
</style>

用新的div去包裹其中一个div并触发父级BFC：
用到了第1条特征，BFC盒子里面和外面的元素互不影响。

<style>
    .box1{
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box2{
        margin-top: 10px;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box{
        float: left;
        /* overflow: hidden; */
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述

拓展：边距margin重叠解决方案https://blog.csdn.net/qq_35430000/article/details/96436915

②解决元素被浮动元素覆盖问题

如果一个元素设置了浮动，元素会脱离文档流，但是下面的元素没有设置浮动，下面的元素会顶上来，形成一个浮动覆盖的效果。根据第5条特征，我们可以通过给非浮动元素设置成BFC元素，可以防止被浮动元素覆盖。

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .box2{
        width: 300px;
        height: 150px;
        background-color: green;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>    
</body>

在这里插入图片描述
开启box2的BFC，解决覆盖问题，比如给box2设置float: left; ，可以看到，这其实是常用的分栏布局的方法。让多个子元素同时向左浮动就可以分栏布局。

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .box2{
        width: 300px;
        height: 150px;
        background-color: green;
        float: left;
    }
</style>

在这里插入图片描述

拓展：解决覆盖问题，只需要开启box2的BFC，除了给box2设置浮动也可以考虑其他方法，比如设置overflow: hidden; 或 display: inline-block; 也可以实现，不过我们一般最常用浮动解决。

③利用BFC清除浮动

这里主要用到第6条特征。在我们上述提到的清除浮动的方法中，给父元素设置浮动，绝对定位，overflow: hidden; ，都是通过使父级盒子变成一个BFC盒子，而BFC盒子会把内部的float盒子算进高度，顺势解决了高度塌陷问题。

因此，清除浮动影响的方法可以概括为三大类：给父元素设置高度，使父元素变成BFC盒子，利用clear属性。

水草123

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【CSS】如何清除浮动的影响、BFC

CSS如何清除浮动的影响、BFC参考文章：1.清除浮动： https://segmentfault.com/a/1190000041226085https://blog.csdn.net/m0_59897687/article/details/1225229292.浮动与绝对定位： https://blog.csdn.net/csdn_ds/article/details/751456823.box-shadow： https://www.cnblogs.com/dongtianee/p/4545
复制链接

扫一扫