关于overflow:hidden属性 文字有点多 麻烦老师解答下，谢谢了
来源：2-4 清除浮动
夜的解忧铺
2021-06-29 00:20:41
<style>
*{
padding: 0;
margin: 0;
}
.c1{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.c2{
width: 200px;
height: 200px;
background-color: darkblue;
float: left;
margin-left: 20px;
}
.c3{
width: 200px;
height: 200px;
background-color: darkred;
float: left;
}
.c4{
width: 200px;
height: 200px;
background-color: darkorange;
float: left;
margin-left: 20px;
}
/* .box1{
overflow: hidden;
margin-bottom: 20px;
} */
.box{
overflow: hidden;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="box">
<div class="c3"></div>
<div class="c4"></div>
</div>
</body>
1 代码是否触发了BFC，是否做到清除浮动了 ，代码是否有问题？
2 BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
1）float的值不是none ----
2）position的值是不是static(固定定位)或者relative(相对定位)
3）display的值是inline-block，
4）overflow:hidden;
触发BFC的是四种情况，其中常用的overflow:hidden属性 是在四个子盒子设置了左浮动后，脱离文档流，但是BFC 相当于一个独立的容器，里面的布局是不影响外面的元素的，我的理解是div class="box" 这两个父盒子是属于body标签的，按理说都属于同一个BFC才对，里面的子盒子也是属于同一个BFC的(div class="box" )，那么在设置了父盒子 overflow:hidden时，却是清除了浮动 并且在设置margin属性时，也解决了上下左右塌陷的问题，塌陷的问题不应该是把元素封闭在一个独立（不同的）的BFC当中才能解决吗？
3
反反复复看了很多解释 感觉BFC当中的overflow:hidden属性和清除浮动当中的方法 有点搞混，麻烦老师讲解下这两者的区别，下面是我自己的理解
在没有设置height属性下 清除浮动需要封闭进一个盒子里，BFC不是也需要封闭进一个盒子吗？
如果设置了height属性，BFC也是创建了 清除浮动也算是清除了，但由于实际内容的问题，这种设置height属性并不靠谱，所以一般不设置height属性，
BFC中，让盒子设置overflow:hidden属性来触发BFC，但是溢出内容不是会被隐藏吗 如果显示的效果是需要溢出的部分 那这种又怎么解决了 overflow:hidden属性又是触发BFC 又是溢出隐藏，在哪种情况取决于哪一种用法
还有BFC又是否需要分父盒子和子盒子之间是否属于同一个BFC？
清除浮动中，父盒子的高度为0，而且子盒子设置浮动属性，脱离文档流，父盒子的高度自然塌陷，变为0，当给其设置height属性时，是不是意味触发了BFC？而在不设置height属性，设置overflow:hidden属性 也是会有溢出被隐藏
1回答
-
好帮手慕星星
2021-06-29
同学你好，问题解答如下：
1、代码触发了BFC，清除了浮动带来的塌陷影响，代码没问题。
2、理解的有点不正确。BFC是指盒子之外的内容和盒子内的内容互不影响，例如body是个BFC，那么body之外的内容和body之内的内容互不影响。但是在body内两个box之间是互相影响的，四个子元素设置浮动，导致box高度塌陷，显示在一行排列。所以为了解决这样影响，给box盒子设置overflow:hidden;属性，分别形成两个不同的BFC，两个box盒子互不影响，上下排列。
3、使用overflow:hidden;属性清除浮动影响会触发BFC，同时此属性也会超出隐藏的作用，所以看布局的实际情况，如果没有子元素超出的情况，就可以用此属性；如果有超出的情况，可以改为设置最外层盒子固定高度。
4、不需要考虑父盒子和子盒子是否属于同一个BFC，知道哪个盒子形成了BFC，与哪个盒子互不影响就可以了。
5、给元素设置高度height不会形成BFC，是自己手动设置的。
自己再理解下，祝学习愉快！
0
相似问题