麻烦老师解答，谢谢
来源：2-3 BFC规范和浏览器差异
dww1
2021-06-27 12:24:43
<!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: 200px;
border: 1px solid #000;
padding: 50px;
/* 溢出边框的内容被隐藏，但是盒子的padding部分溢出的内容还在 */
}
</style>
</head>
<body>
<div class="box">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
在这里文字内容--设置padding属性，没有设置height属性，即便文字再多都会被自动撑起，那这种情况，不设置overflow：hidden 形成BFC是不是也是可以的，但是在设置height属性时， overflow：hidden就会将超出边框内容隐藏
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，里面的布局不会影响到外面的容器，那在没有设置height属性，设置overflow：hidden，设置float时，为什么可以撑起内容呢，是因为设置overflow：hidden形成的BFC也相当于一个盒子吗？
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 50px;
border: 10px solid rgb(0, 238, 186);
overflow: hidden;
}
.box1 .p1{
width: 100px;
height: 200px;
background-color: #00ff;
float: left;
}
.box1 .p2{
width: 50px;
height: 200px;
background-color: rgb(174, 174, 240);
float: left;
}
.box1 ul{
list-style: none;
}
.box1 ul li{
width: 50px;
height: 200px;
background-color: rgb(245, 10, 10);
float: left;
}
</style>
<body>
<div class="box1">
<div class="p1"></div>
<div class="p2"></div>
<ul>
<li></li>
</ul>
</div>
1回答
-
好帮手慕星星
2021-06-27
同学你好，问题解答如下：
1、不设置overflow:hidden;是可以的，内容自己撑开。
2、是的，元素设置overflow:hidden;可以触发BFC，所以即使元素设置了元素脱离文档流，外层的盒子不设置高度也可以撑起来
祝学习愉快！
0
相似问题