BFC float坍塌:clear与BFC

最新推荐文章于 2022-10-29 17:23:10 发布

一只肥鹤

最新推荐文章于 2022-10-29 17:23:10 发布

阅读量290

点赞数 1

本文链接：https://blog.csdn.net/weixin_43322208/article/details/90452839

版权

博客介绍了浮动及清除浮动的4种方式，如在父元素末尾加额外标签、触发父容器BFC、使用伪类元素等，还阐述了BFC的概念、布局规则、能生成BFC的元素，以及BFC可解决自适应两栏布局、清除内部浮动、防止垂直margin重叠等问题。

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

浮动及清除浮动的4种方式

float坍塌：（父容器高度坍塌，背景或边框不能正确显示）解决方法：clear与BFC

父元素内部末尾增加一个额外标签，如空div，clear:both
对父容器设置overflow: hidden/auto，触发其BFC
缺点：设置hidden会导致超出部分直接被隐藏，，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。
使用伪类元素，再用伪类元素清除浮动，类似方法1 .father:after{content:'';clear:both;display:block/table;}

此法要注意的是，必须是after伪元素，且该伪类元素必须为block元素，原因是after伪元素在其父容器的其他标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，然后设置block元素是为了不让其它元素与其一排，再对其设置清除浮动，父容器自然就被这个after伪元素撑开了高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float坍塌</title>
</head>
<body>
<p>1.新增空div clear:both</p>
<div style="background: lightgrey">
    <div style="float: left;height: 100px;">
        aaa
    </div>
    <div style="clear: both;"></div>
</div>
<br>
<p>2.父元素 :after</p>
<style>#father:after{content:'';clear:both;display:table;}</style>
<div id="father" style="background: lightgrey;">
    <div id="son" style="float: left;height: 100px;">
        #father:after{content:'';clear:both;display:block/table;}必须要有display:block
    </div>
</div>
<br>
<p>3.父元素 overflow:hidden/auto.触发其BFC
    缺点：设置hidden会导致超出部分直接被隐藏，且不占据文档流位置，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。</p>
<div style="background: lightgrey;overflow: hidden">
    <div style="float: left;height: 100px;">
        父元素 overflow:hidden/auto.触发其BFC
    </div>
</div>
</body>
</html>

浮动及清除浮动的4种方式：https://www.cnblogs.com/xiaoqiang001/p/3908257.html

4.声明清除（第四种，是大部分大型网站常用的，比如新浪淘宝的清除浮动的效果。）

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*照顾ie6*/
zoom:1;
}

BFC

https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

https://www.cnblogs.com/nujufoul/p/7092520.html

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

（它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。）