CSS 子元素宽度变宽时，如何撑开父元素？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 子元素宽度变宽时，如何撑开父元素？相关的知识，希望对你有一定的参考价值。
代码如下
<html>
<head>
<style>
.boxbackground:blue;width:200px;height:400px;
.childrenbackground:green;width:300px;margin:20px;
</style>
</head>
<body>
<div class="box">
<div class="children">11111111</div>
<div class="children">22222222</div>
</div>
</body>
</html>
结果如下：
有人说可以使父元素不指定宽度，但是
我是想父元素总比子元素大一点。
如果不指定宽度的话，父元素就太宽了。我想要的结果如下图：
不懂的，别来回答，谢谢！
希望子元素撑开父级元素可以使用以下两种方法：
1、父级版元素宽度不固定，父级元素设置为inline-block或者添加float；
2、对父级元素使用min-width，这样只限制了最小的宽度，如果子元素变宽，父级同样会变宽。
3、首先父类元素必须不是相对定位，如果是相对定位宽度就会默认为百分百。所以必须是绝对定位或者fixed。其实设置了这一步，父类的div已经达到要求了。
4、用第三种方法有个不足之处就是，如果子类运用了浮动的话，因为浮动会会脱离文档流，所以不能撑开父类，这时候可以给父类元素加一句overflow:hidden这样就可以让浮动元素也撑开父类。
扩展资料：
当子元素全部浮动时如何解决父元素无法撑开的解决办法：
1、父元素添加高度。
此方法可以将父元素显示出来。
缺点：但当调整子元素高度的时候，若要实现父元素包含子元素的效果，就也要调整父元素高度。实在很麻烦！所以此方法不要用！
2、父元素也添加浮动。
以暴制暴的方法！别人浮起来自己也要跟着一起浮。
缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。
3、给父元素添加overflow：hidden；
缺点：一旦包含非浮动的子元素，则会影响其显示。
4、给父元素添加一个无关的元素，让添加的无关元素去清除浮动 clean：both；
缺点：添加了一个无关元素，代码阅读受影响。
5、通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类。
推荐此方法，比较高级，而且没有以上缺点。
参考技术A 希望子元素撑开父级元素可以使用以下两种方法：1、父级元素宽度不固定，父级元素设置为inline-block或者添加float；
2、对父级元素使用min-width，这样只限制了最小的宽度，如果子元素变宽，父级同样会变宽； 参考技术B 你只要没有限定父元素的宽度，高度，当子元素的内容超过父元素的高宽时，会自动撑开 参考技术C 因为div的默认宽度是auto如果要父元素根据子元素的宽度改变，可以让他脱离文档流，给他一个position：absolute；的定位或者display：inline-block这样应该可以。 参考技术D .boxmin-width:200px;background:blue;height:400px;
以上是关于CSS 子元素宽度变宽时，如何撑开父元素？的主要内容，如果未能解决你的问题，请参考以下文章
float：left设置子元素高度会随着子元素越来越高可是不能撑开父元素DIV的宽度怎么办?