关于高度塌陷的问题
来源：4-4 首页.基本样式-模块-banner
慕仙0328516
2018-11-16 20:58:15
<!DOCTYPE HTML>
<html>
<head>
<title>慕淘网</title>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
/*公共样式*/
.wrap{
width:1200px;
margin:0 auto;
position:relative;
}
/*清除浮动，谁浮动了就在父元素上加一个clearfix的类*/
.clearfix:after{
content:" ";
display:block;
height:0;
line-height:0;
clear:both;
zoom:1;
}
a{
text-decoration: none;
}
select,input{
border:none;
outline:none;
}
/*头部区域*/
.header{
background:#f3f5f7;
padding-bottom: 20px;
}
.header .wrap{
border-bottom: 1px solid #cdd0d4;
}
.header a{
display:inline-block;
line-height: 38px;
font-size:12px;
color:#71b4e3;
}
.pull{
padding-right:16px;
float:right;
background:url(material/icon/21.png) no-repeat right center;
margin-right:16px;
}
/*logo区域*/
.logo{
background:#f3f5f7;
padding-bottom: 20px;
}
.mooctao{
width:150px;
height:52px;
padding:16px 12px;
display: inline-block;
}
.mooctao img{
width:100%;
height:100%;
}
.search{
width:600px;
height:36px;
position:absolute;
top:24px;
left:300px;
}
.searchBox{
width:72px;
height:36px;
position:absolute;
top:24px;
left:900px;
background: #07111b;
color:white;
cursor:pointer;
}
.logo .car{
float:right;
display:inline-block;
height: 20px;
line-height: 20px;
background-color:red;
margin-top:24px;
margin-right: 16px;
width:120px;
padding:8px 2px 8px 20px;
color:white;
font-size:12px;
position:relative;
}
.logo .car span:nth-child(1){
width:16px;
height:16px;
display: inline-block;
position: absolute;
left:6px;
top:10px;
}
.logo .car span:nth-child(2){
width:10px;
height:10px;
display: inline-block;
position: absolute;
right:20px;
top:10px;
}
/*导航区*/
.nav{
height:50px;
line-height: 50px;
background:#07111b;
}
.nav a{
display:inline-block;
width:80px;
text-align: center;
color:white;
font-size: 14px;
}
.nav .menu{
width:208px;
background:#cb1414;
}
/*banner区*/
.menu-list{
float:left;
}
.menu-list-item{
width:190px;
height:38px;
line-height:38px;
background:#f01414;
font-size:14px;
color:white;
padding-left:18px;
}
.banner-slider{
width:720px;
height:520px;
margin-top:12px;
margin-left:8px;
background:red;
float:left;
}
.banner-news{
position: absolute;
right:0;
top:12px;
width:250px;
height:200px;
border:0.4px solid #ffe9bd;
}
.banner-news .banner-news-top{
font-size: 16px;
margin:18px;
color:red;
}
.banner-news .banner-news-top a{
margin-right:18px;
margin-top:2px;
font-size: 12px;
float:right;
display:inline-block;
color:#867e70;
}
.banner-news .book{
font-size: 12px;
color: #867e70;
margin:14px;
}
.banner-news .book span{
font-weight: bold;
}
.banner .more{
position:absolute;
top:212px;
right:0;
font-size:0;
}
.banner .link{
border-bottom:0.4px solid #ffe9bd;
border-right:0.4px solid #ffe9bd;
width:61.6px;
text-align:center;
height:70px;
font-size:12px;
display:inline-block;
color:gray;
}
.banner .link img{
margin-top:18px;
width:24px;
height:24px;
}
.banner .more .spe{
border-left:0.4px solid #ffe9bd;
}
.banner .suit{
position:absolute;
top:198px;
right:0;
width:251.2px;
height:108px;
background:url("material/ad.png") center center no-repeat;
}
.floor{
background: yellow;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jQuery/jquery.js"></script>
</head>
<body>
<div class="header">
<div class="wrap">
<a href="#" class="login" id="login">亲，请登录</a>
<a href="#" class="rege" id="rege">免费注册</a>
<a href="#" class="hang">手机逛慕淘</a>
<a href="#" class="pull">我的慕淘</a>
<a href="#" class="pull">收藏夹</a>
<a href="#" class="pull">商品分类</a>
<a href="#" class="pull">卖家中心</a>
<a href="#" class="pull">联系客服</a>
</div>
</div>
<div class="logo">
<div class="wrap clearfix">
<a href="#" class="mooctao"><img src="material/logo.png"></a>
<input type="text" class="search" placeholder="灵魂美食一元抢">
<input type="button" class="searchBox" value="搜索">
<a href="#" class="car clearfix"><span><img src="material/icon/26.png"></span> 购物车 | 0 <span><img src="material/icon/23.png"></span></a>
</div>
</div>
<div class="nav">
<div class="wrap clearfix">
<a href="#" class="menu">商品分类</a>
<a href="#">数码城</a>
<a href="#">天黑黑</a>
<a href="#">团购</a>
<a href="#">发现</a>
<a href="#">二手特价</a>
<a href="#">名品汇</a>
</div>
</div>
<div class="banner">
<div class="wrap clearfix">
<div class="menu-list">
<div class="menu-list-item">家用电器</div>
<div class="menu-list-item">手机、运营商、数码</div>
<div class="menu-list-item">电脑、办公</div>
<div class="menu-list-item">家居、家具、家装、厨具</div>
<div class="menu-list-item">男装、女装、童装、内衣</div>
<div class="menu-list-item">化妆、清洁、宠物</div>
<div class="menu-list-item">运动户外、钟表</div>
<div class="menu-list-item">汽车、汽车用品</div>
<div class="menu-list-item">母婴、玩具乐器</div>
<div class="menu-list-item">食品、酒类、生鲜、特产</div>
<div class="menu-list-item">医药保健</div>
<div class="menu-list-item">图书、音像、电子书</div>
<div class="menu-list-item">彩票、旅行、充值、票务</div>
<div class="menu-list-item">理财、白条、众筹、保险</div>
</div>
<div class="banner-slider"></div>
<div class="banner-news clearfix">
<div class="banner-news-top">慕快报<a href="#" class="toMany">更多></a></div>
<div class="book"><span class="discount">[特惠] </span>精选图书每满150减50</div>
<div class="book"><span class="discount">[广告] </span>因广州图书仓搬仓升级配送延迟</div>
<div class="book"><span class="discount">[特惠] </span>爆款手机12期免息 抽奖赢电视</div>
<div class="book"><span class="discount">[广告] </span>广东、福建受台风影响配送延迟</div>
<div class="book"><span class="discount">[特惠] </span>大闸蟹领券满399减188</div>
</div>
<div class="more">
<div class="link spe"><img src="material/icon/1.png"><br/>话费</div>
<div class="link"><img src="material/icon/2.png"><br/>机票</div>
<div class="link"><img src="material/icon/3.png"><br/>电影票</div>
<div class="link"><img src="material/icon/4.png"><br/>游戏</div><br/>
<div class="link spe"><img src="material/icon/5.png"><br/>彩票</div>
<div class="link"><img src="material/icon/6.png"><br/>加油卡</div>
<div class="link"><img src="material/icon/7.png"><br/>酒店</div>
<div class="link"><img src="material/icon/8.png"><br/>火车票</div><br/>
<div class="link spe"><img src="material/icon/9.png"><br/>众筹</div>
<div class="link"><img src="material/icon/10.png"><br/>理财</div>
<div class="link"><img src="material/icon/11.png"><br/>礼品卡</div>
<div class="link"><img src="material/icon/12.png"><br/>白条</div>
<div>
<div class="suit"></div>
</div>
</div>
<div class="floor">
<div class="wrap">
<div class="one">
<div>1F</div>
<div>服装鞋包</div>
<a href="#">大牌</a>|
<a href="#">男装</a>|
<a href="#">女装</a>
</div>
</div>
</div>
<div class="friendLink">kj
</div>
<div class="footer">
</div>
</body>
</html>
为什么我的floor往上面去了，是前面的高度塌陷了吗，请老师指点（不用管图片的问题噢）？我想要的floor是接在menu-list后面的，应该怎么办？
1回答
-
是高度塌陷的问题，wrap中左侧列表，中间轮播使用了浮动，右侧的慕快报使用了定位，都脱离的文档流，所以父元素高度没有撑起来，可以再父元素中添加overflow:hidden;参考：
自己测试下，祝学习愉快！
0
相似问题