希望子元素撑开父级元素可以使用以下两种方法：
1、父级版元素宽度不固定，父级元素设置为inline-block或者添加float；
2、对父级元素使用min-width，这样只限制了最小的宽度，如果子元素变宽，父级同样会变宽。
3、首先父类元素必须不是相对定位，如果是相对定位宽度就会默认为百分百。所以必须是绝对定位或者fixed。其实设置了这一步，父类的div已经达到要求了。
4、用第三种方法有个不足之处就是，如果子类运用了浮动的话，因为浮动会会脱离文档流，所以不能撑开父类，这时候可以给父类元素加一句overflow:hidden这样就可以让浮动元素也撑开父类。
扩展资料：
当子元素全部浮动时如何解决父元素无法撑开的解决办法：
1、父元素添加高度。
此方法可以将父元素显示出来。
缺点：但当调整子元素高度的时候，若要实现父元素包含子元素的效果，就也要调整父元素高度。实在很麻烦！所以此方法不要用！
2、父元素也添加浮动。
以暴制暴的方法！别人浮起来自己也要跟着一起浮。
缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。
3、给父元素添加overflow：hidden；
缺点：一旦包含非浮动的子元素，则会影响其显示。
4、给父元素添加一个无关的元素，让添加的无关元素去清除浮动 clean：both；
缺点：添加了一个无关元素，代码阅读受影响。
5、通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类。
推荐此方法，比较高级，而且没有以上缺点。
把这一句 style="width:2000px"去掉，当它所在的div里面的内容增多的时候，就自然有横向滚动条了。可以多复制几个class=“glist”的整个div试试看。
例如：
<div id="teamLeft" class="f_l">
<div class="glist">
<div class="gimg"><a href="goods.php?id={$goods_list.goods_id}"><img src="{$goods_list.goods_thumb}" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id={$goods_list.goods_id}">{$goods_list.goods_name}</a></div>
<div class="gprice">￥<span>{$goods_list.shop_price}</span>/ <em>{$goods_list.market_price}</em></div>
</div>
<div class="glist">
<div class="gimg"><a href="goods.php?id={$goods_list.goods_id}"><img src="{$goods_list.goods_thumb}" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id={$goods_list.goods_id}">{$goods_list.goods_name}</a></div>
<div class="gprice">￥<span>{$goods_list.shop_price}</span>/ <em>{$goods_list.market_price}</em></div>
</div>
<div class="glist">
<div class="gimg"><a href="goods.php?id={$goods_list.goods_id}"><img src="{$goods_list.goods_thumb}" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id={$goods_list.goods_id}">{$goods_list.goods_name}</a></div>
<div class="gprice">￥<span>{$goods_list.shop_price}</span>/ <em>{$goods_list.market_price}</em></div>
</div>
<div class="glist">
<div class="gimg"><a href="goods.php?id={$goods_list.goods_id}"><img src="{$goods_list.goods_thumb}" width="118" height="117" /></a></div>
<div class="gname"><a href="goods.php?id={$goods_list.goods_id}">{$goods_list.goods_name}</a></div>
<div class="gprice">￥<span>{$goods_list.shop_price}</span>/ <em>{$goods_list.market_price}</em></div>
</div>
</div>
对，.list做绝对定位就可以了。浮动是float，这个效果主要用到的是绝对定位而不是浮动。
li做了浮动，float:left这样是让各个Li横向显示。
容器li设定相对定位，里面的list绝对定位就不会跑偏了。
<style>
ul,li{ margin:0pxpadding:0px}
#nav
{
margin:0px
width: 980px
height: 30px
padding: 0px 5px
background:#FF9933 url(../images/topmenu.gif) no-repeat
}
#nav a:link, a:visited
{
color: #fff
text-decoration: none
}
#nav a:hover
{
color: #000
text-decoration: none
}
#nav li
{
text-align:center
font-weight: bold
float: left
display: inline
padding:0px 4px
line-height:30px
margin-right:10px
position:relative /*容器相对定位，里面的.list绝对定位就不会跑偏了。*/
}
#nav div.list
{
display:none
font-size: 13px
line-height: 20px
text-align: left
padding: 4px
width: 69px
font-weight: normal
background-color:#FF9933
position:absolute
top:30pxleft:0px
}
#nav li.menu1 div.list{ display:block}
</style>
<div id="nav">
<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">
<a href="#">在线办事</a>
<div class="list">
<a href="#">网上咨询</a><br />
<a href="#">资料下载</a><br />
<a href="#">网上受理</a><br />
<a href="#">网上投诉</a><br />
</div>
</li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
</div>
<div id="content">测试测试测试</div>
