设置BFC后子盒子还是超出父盒子了
# 具体遇到的问题
box1设置为左浮动，就已经是一个BFC了，那么为什么里面的子盒子还超出BFC呢
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC规范</title>
<style>
.box1{
width: 300px;
height:200px;
background-color: red;
float: left;
}
.c1{
width:200px;
height:300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="c1"></div>
</div>
</body>
</html>
正在回答
同学你好，本代码并没有形成BFC，参考如下（可以复习一下课程，结合课程理解）：
1. 在父元素没有高度的前提下，子元素设置浮动会脱离文档流，所以就没有办法撑开父元素高度。
父元素高度为0，如下：
此时就可以给父元素设置浮动，形成BFC，父元素高度就撑开了。
所以如上情况，形成BFC的前提是父元素不设置高度，且子元素要设置浮动。不然设置BFC没有意义，子元素高度大于父元素高度肯定会溢出的。
2.如果父元素设置高度小于子元素高度， 即使使用overflow: hidden超出隐藏也是不对的。
如下图，子元素虽然不会溢出了，但是超出的部分被隐藏了，这样子元素显示不全：
所以父元素是不需要设置高度的，如下：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星