父盒子无法被子盒子撑开问题

父盒子内有的任一级子盒子有浮动会导致父盒子无法高度自适应（即被子盒子撑开）
原css代码

<style type="text/css">
*{
	margin:0;
	padding:0;}
ul{
	list-style:none;}
.container{
	width:100%;
	background-color:#add8e6;}
.up{
	margin:0 auto;
	width:960px;
	}
.bottom{
	margin:0 auto;
	width:220px;
	}
.container li{
	float:left;
	margin-right:20px;
	margin-top:20px;
	margin-bottom:30px;
	background-color:#fff;
	width:220px;
	height:180px;
	text-align:center;}
img{
	margin:10px auto;}
</style>

解决方法：
1、设置父盒子高度
2、对父级div标签闭合前加一个clear清除浮动对象。
更改后css代码

<style type="text/css">
*{
	margin:0;
	padding:0;}
ul{
	list-style:none;}
.container{
	width:100%;
	background-color:#add8e6;
}
.up{
	margin:0 auto;
	width:960px;
	}
.bottom{
	margin:0 auto;
	width:220px;
	}
.container li{
	float:left;
	margin-right:20px;
	margin-top:20px;
	margin-bottom:30px;
	background-color:#fff;
	width:220px;
	height:180px;
	text-align:center;}
img{
	margin:10px auto;}

.clear{ 
	clear:both;} 
</style>

html代码

<body>
<div class="container">
	<div class="up">
    	<ul>
        	<li><img src="1.PNG" width="200px"/>Batman</li>
        	<li><img src="2.PNG" width="200px"/>Eminem</li>
        	<li><img src="3.PNG" width="200px"/>Skrillex</li>
        	<li><img src="4.PNG" width="200px"/>Hearthstone</li>
        </ul>
    </div>
    <div class="bottom">
    	<ul>
        	<li><img src="5.PNG" width="200px"/>HigherBrother</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>

3、要对父级加一个overflow:hidden样式

.container{
	width:100%;
	background-color:#add8e6;
	overflow:hidden;

效果：
父盒子无法被子盒子撑开问题

父盒子无法被子盒子撑开问题

相关推荐