关于商品楼层父元素塌陷的问题
由于商品内容是左浮动的，导致父元素无法根据商品的数量动态修改自身高度
我给父元素添加以下属性可以解决，但是一旦商品内容的总外包设置为绝对定位(为了有tab切换的效果)就无效了
.clear:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
}
//以下是商品楼层代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 楼层区 */
.main{
width: 80%;
margin:0 auto;
margin-top: 10px;
border: 1px solid #000;
}
.main .floor{
width: 100%;
margin-top: 30px;
position: relative;
height: 650px;/* 删 */
}
/* 楼层区-标题栏 */
.main .floor .title{
width: 100%;
height: 100px;
}
.main .floor .title .left{
height: 100px;
line-height: 100px;
float: left;
}
.main .floor .title .left .icon{
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background:#000;
border-radius: 50%;
color: #fff;
float: left;
margin:35px 20px 0 20px;
}
.main .floor .title .left span{
font-size: 25px;
font-weight: bold;
}
.main .floor .title .right{
float: right;
}
.main .floor .title .right .btn{
float: left;
height: 100px;
text-align: center;
position: relative;
}
.main .floor .title .right .btn span{
color: #666;
margin-top: 35px;
padding:0 20px;
display: block;
cursor: pointer;
}
.main .floor .title .right .btn .span-active{
color: red;
}
.main .floor .title .right .btn .middle-btn{
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.main .floor .title .right .btn img{
width: 14px;
height: 8px;
display: none;
position: absolute;
left: 0;
right: 0;
margin:0 auto;
bottom: 0;
}
.main .floor .title .right .btn .img-active{
display: block;
}
/* 楼层区-下划线 */
.main .floor .underline{
border-top:2px solid red;
margin-top: -2px;
}
/* 楼层区-商品内容区 */
.main .floor .content{
width: 100%;
height: 440px;/* 删 */
position: absolute;
left: 0;
display: none;
}
.content-active{
display: block!important;
}
.main .floor .content .wrap{
width: 16.666%;
height: 220px;
margin:30px 0;
float: left;
box-sizing: border-box;
}
.main .floor .content .wrap img{
width: 114px;
height: 114px;
margin: 20px auto;
display: block;
}
.main .floor .content .wrap .item-name{
text-align: center;
}
.main .floor .content .wrap .item-price{
text-align: center;
color: red;
margin: 10px 0 20px 0;
}
</style>
</head>
<body>
<div class="main">
<!-- 1F -->
<div class="floor">
<div class="title">
<div class="left">
<div class="icon">1F</div>
<span>服装鞋包</span>
</div>
<div class="right">
<div class="btn">
<span class="span-active" data="0">大牌</span>
<img class="img-active" src="img\floor-arrow.png">
</div>
<div class="btn">
<span class="middle-btn" data="1">男装</span>
<img src="img\floor-arrow.png">
</div>
<div class="btn">
<span data="2">女装</span>
<img src="img\floor-arrow.png">
</div>
</div>
</div>
<div class="underline"></div>
<div class="content content-active">
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
<div class="wrap">
<img src="img\floor\1.jpg">
<div class="item-name">必迈BMAI一体织跑步短袖T恤</div>
<div class="item-price">￥159</div>
</div>
<div class="wrap">
<img src="img\floor\1.jpg">
<div class="item-name">必迈BMAI一体织跑步短袖T恤</div>
<div class="item-price">￥159</div>
</div>
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
<div class="wrap">
<img src="img\floor\2.jpg">
<div class="item-name">玫瑰连衣裙</div>
<div class="item-price">￥289</div>
</div>
<div class="wrap">
<img src="img\floor\2.jpg">
<div class="item-name">玫瑰连衣裙</div>
<div class="item-price">￥289</div>
</div>
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
<div class="wrap">
<img src="img\floor\3.jpg">
<div class="item-name">美特斯邦威牛仔外套</div>
<div class="item-price">￥99</div>
</div>
<div class="wrap">
<img src="img\floor\3.jpg">
<div class="item-name">美特斯邦威牛仔外套</div>
<div class="item-price">￥99</div>
</div>
</div>
<div class="content">
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
</div>
<div class="content">
<div class="wrap">
<img src="img\floor\1.png">
<div class="item-name">匡威男棒球开衫外套2015</div>
<div class="item-price">￥479</div>
</div>
</div>
</div>
</div>
</body>
</html>31
收起
正在回答 回答被采纳积分+1
2回答
相似问题
为什么设置子元素浮动后没有出现父元素塌陷？
0
1
3
关于浮动使用后父元素塌陷和居中问题
20
0
4
清除浮动那些元素其实还是浮动的？
0
1
2
这里item没有设置float，为什么会发生高度塌陷？
62
0
5
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星