本帖最后由 西安前端组 于 2018-1-10 22:30 编辑
子元素撑开父元素宽高问题小结在html中，父元素中拥有子元素是很正常的情况。如果我们不设置父元素的宽度或者高度，默认情况下，父元素的宽度和高度会被子元素撑开。 样式代码如下： <style>
.main{
width: 500px;
border: 1px solid red;
} .child{
width: 200px;
height: 120px;
background-color: blue;
}
</style>
Html结构如下： <body>
<div class="main">
<div class="child"></div>
</div>
</body> 上述的样式和html结构产生的效果如下： 红色边框的是main，蓝色区域是child，我们只给child设置了宽度和高度，给main设置了宽度，但是没有给main设置高度，我们可以看到main的高度是被child给撑开了。 所以我们可以得出第一个结论，默认情况下，子元素是会将父元素的宽度或者高度给撑开的。
一般情况下，有两种原因会造成子元素无法将父元素的宽度或者高度撑开。 1、子元素设置了浮动 2、子元素设置了绝对定位(absolute)或者固定定位(fixed) 现在我将样式代码做如下修改： 样式代码如下： <style>
.main{
width: 500px;
border: 1px solid red;
} .child{
width: 200px;
height: 120px;
background-color: blue; float: left;
}
</style> Html结构如下： <body>
<div class="main">
<div class="child"></div>
</div>
</body> 我给child设置了浮动，造成的效果如下图： 我们可以看出来，此时父元素没有高度了。因为将child设置为了float，child就脱离了标准文档流，因此无法撑开父元素的宽度或者高度。
我现在对代码再次进行修改，如下： 样式代码如下： <style>
.main{
width: 500px;
border: 1px solid red; } .child{
width: 200px;
height: 120px;
background-color: blue; position: absolute;
}
</style> Html结构如下： <body>
<div class="main">
<div class="child"></div>
</div>
</body> 我给child设置了绝对定位，造成的效果如下图：
我们可以看出来，此时父元素没有高度了。因为将child设置为了绝对定位或者固定定位，child就脱离了标准文档流，因此无法撑开父元素的宽度或者高度。
下面说说关于如果子元素没有撑开父元素宽高，而我们又需要父元素的宽高被子元素撑开，可以采取的解决方案。 1、由于浮动造成 (1) 给父元素的伪元素清除浮动 <style>
.main::after{
content: "";
display: block;
clear: both;
}
</style> 注意，此时只能给after增加，给before增加将没有效果。因为所谓清除浮动其实指的是给main的最后在增加一个子元素，给这个子元素增加clear:both的样式。main的伪元素确实是main的子元素，不过before是在child前，而after是在child后，所以after才能符合要求。 (2) 给父元素设置overflow为hidden <style>
.main{
width: 500px;
border: 1px solid red; overflow: hidden; }
</style> (3) 给父元素设置绝对定位 <style>
.main{
width: 500px;
border: 1px solid red; position: absolute; }
</style> 2、由于定位造成 (1) 给父元素也增加position为absolute，相当于父元素和子元素都脱离了标准文档流，可以理解为同流合污了，所以此时子元素绝对定位能够将绝对定位的父元素的宽高撑开。 这里多说一句，通常我们习惯说子绝对布局，父相对布局，其实子绝对布局，父绝对布局，子元素的定位也是参照父元素的。只不过此时的父元素不占位而已。 (2) 貌似没有第二种解决方案。 子绝对父相对看看能否改成子绝对父绝对。 如果一定得要是子绝对父相对，那么此时一般也不需要靠子元素将父元素的宽高撑开。例如： 在这个例子中，我们要给轮播图的上下两个箭头进行定位，那么我们可以采取子绝对父相对，也可以采取子绝对父绝对。咱们的第一目标是要将上下的箭头进行定位。 不过对于子绝对父绝对的话，那么轮播图下面的内容将会向上移动，因为轮播图如果绝对定位，它将不占位置了。 综合考虑，这样的布局我们采取子绝对父相对是比较合适的。不过大家可以仔细想想，这种情况下，轮播图的宽高需要被箭头撑开吗？
讲上述内容用思维导图的方式总结如下：
| 
收藏
淘帖
踩
