浮动元素是否会撑起父容器?

答案是不会。

为了证明答案的正确性,下面做了一个小例子。
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算父div的宽高</title>


<style>
#parent{
background-color: dimgray;
}
#div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
#div2{
width: 150px;
height: 250px;
background-color: aqua;
float: right;
}
</style>
</head>
<body>
<div id="parent">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
</pre>

在上面的代码块中,id为<em>parent</em>的div中包含两个子div,分别为他们设置了宽、高、背景色、浮动效果等样式。并且为id为parent的div设置<code> background-color: dimgray; </code>,在浏览器的效果如下图所示:

1-1.png

从上面1-1图片中看到,左右两个浮动div效果正常显示,但是其父容器并没有在他们的下方显示(需要注意的是父容器有背景色),所以得出的结论就是不会撑起父容器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的...
    珍此良辰阅读 1,937评论 2 15
  • Ø JavaScript 3 HTML对象获取问题 3 const问题 3 event.x与event.y问题 3...
    DavieKong阅读 487评论 0 1
  • 别人的生活都有声有色,只有我,把自己的生活过得什么都不是~
    大奔奔阅读 169评论 0 0
  • 明天声乐舞蹈基本ok 钢琴自己又尝试了不同的玩法。 看到他很好,就好了。 中午吃了一个超级大的雪梨。 午餐吃了一个...
    逆风追梦人阅读 104评论 0 0