overflow:hidden形成BFC和overflow:hidden溢出隐藏的关系

overflow:hidden形成BFC和overflow:hidden溢出隐藏的关系


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之前是这样:

http://img1.sycdn.imooc.com//climg/60a380fb09f0122312160532.jpg


既然overflow属性会使溢出盒子边框的部分被隐藏

那为什么加上overflow:hidden之后这两个子盒子没有被隐藏,反而被大盒子撑起来了

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,这样理解是可以的。祝学习愉快~

好帮手慕言 2021-05-18 17:21:52

同学你好,解答如下:

1、overflow:hidden可以创建bfc,也可以让超出父盒子的内容隐藏,可以参考第二点。

2、设置overflow:hidden之后,创建bfc,box的高度可以被子元素撑起来。

如果父元素设置了宽高,并且值设置的比较小,那么溢出box的内容就会被隐藏

http://img1.sycdn.imooc.com//climg/60a386af090c2b5f04550208.jpg

溢出的部分被隐藏了,效果如下:

http://img1.sycdn.imooc.com//climg/60a386da0976787302630426.jpg

祝学习愉快~


  • 提问者 cloudonthesun #1

    老师,那可不可以理解为当父元素无高度时,设置overflow:hidden是为了形成BFC,让子元素撑开父元素;当父元素存在高度但是小于子元素高度时,就用来实现溢出隐藏?

    2021-05-18 19:24:02
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师