overflow：hidden形成BFC和overflow：hidden溢出隐藏的关系
来源：2-3 BFC规范和浏览器差异
cloudonthesun
2021-05-18 16:59:59
1.二者的关系是？
2.
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
border: 10px solid #000;
/* float: left; */
/* display: inline-block; */
/* 利用overflow来形成BFC */
overflow: hidden;
}
.c1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.c2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
没有加overflow之前是这样：
既然overflow属性会使溢出盒子边框的部分被隐藏
那为什么加上overflow：hidden之后这两个子盒子没有被隐藏，反而被大盒子撑起来了
写回答
2回答
-
同学你好，这样理解是可以的。祝学习愉快~
0 -
好帮手慕言
2021-05-18
同学你好，解答如下：
1、overflow：hidden可以创建bfc，也可以让超出父盒子的内容隐藏，可以参考第二点。
2、设置overflow：hidden之后，创建bfc，box的高度可以被子元素撑起来。
如果父元素设置了宽高，并且值设置的比较小，那么溢出box的内容就会被隐藏
溢出的部分被隐藏了，效果如下：
祝学习愉快~
1h021-05-18
相似问题