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

最新推荐文章于 2022-10-18 21:46:21 发布

weixin_43403543

最新推荐文章于 2022-10-18 21:46:21 发布

阅读量4.1k

点赞数 1

分类专栏：自省

本文链接：https://blog.csdn.net/weixin_43403543/article/details/89333406

版权

自省专栏收录该内容

4 篇文章 1 订阅

订阅专栏

父盒子内有的任一级子盒子有浮动会导致父盒子无法高度自适应（即被子盒子撑开）
原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;

效果：
在这里插入图片描述

weixin_43403543

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
父盒子无法被子盒子撑开问题

父盒子内有的任一级子盒子有浮动会导致父盒子无法高度自适应（即被子盒子撑开）原css代码<style type="text/css">*{ margin:0; padding:0;}ul{ list-style:none;}.container{ width:100%; background-color:#add8e6;}.up{ margin:0 auto; ...
复制链接

扫一扫