老师，不过我有个疑问

来源：3-5 CSS盒模型（二）

AKhui

2019-09-07

就是我们举的面试实例题：
子元素高度100px,与父元素的上边距是10px，问父元素的高度是多少？
这一题目虽然可以通过BFC特性来达到让父元素的高度为110px;
但是好像原本父元素高度100px;的原因好像跟BFC没有直接相关？就是我们上课讲到的那几点BFC相关的特性。
因为在chrome和firefox中当父级元素有设置padding-top值大于0的时候，父级元素就可以变为110px;（其他浏览器还没验证）但是这时父级元素并没有BFC特性，比如说，它仍然会与上一个浮动元素重叠。
图片描述
代码如下：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS盒模型</title>
  <style>
    html *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <section id="section-brother"></section>
  <section id="sec">
    <style media="screen">
      #section-brother {
		    width: 100px;
		    height: 100px;
		    float: left;
		    background: orange;
		}
      #sec {
		    background: #f00;
		    padding: 10px 0 0 0;
		}
		.child {
		    height: 10px;
		    margin-top: 10px;
		    background: yellow;
		}
    </style>
    <article class="child">sfsfdfdsfdfsdf</article>
  </section>
</body>
</html>

再次谢谢老师！

写回答

1回答