product没有高度时，清除浮动没有用，有高度时候页面缩小以后h2有高度有问题

来源：4-7 主要内容样式2

祀未

2017-11-27

html:

<h2>

固定期限产品

<em>甄选优质基金</em>

</h2>

<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>

<p>总成交金额:<span class="money">1888<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">3.80%<i>起</i></span></p>

<p>总成交金额:<span class="money">2220<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">4.00%<i>起</i></span></p>

<p>总成交金额:<span class="money">2450<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">4.20%<i>起</i></span></p>

<p>总成交金额:<span class="money">2888<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">5.20%<i>起</i></span></p>

<p>总成交金额:<span class="money">3580<i>万元</i></span></p>

</div>

</div>

</section>

<h2>

固定期限产品

<em>甄选优质基金</em>

</h2>

<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>

<p>总成交金额:<span class="money">1888<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">3.80%<i>起</i></span></p>

<p>总成交金额:<span class="money">2220<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">4.00%<i>起</i></span></p>

<p>总成交金额:<span class="money">2450<i>万元</i></span></p>

</div>

</div>

<p>约定年化收益率:<span class="year-rate">5.20%<i>起</i></span></p>

<p>总成交金额:<span class="money">3580<i>万元</i></span></p>

</div>

</div>

</section>

css:

/*产品列表*/

.product{

width: 90%;

margin:2rem auto;

font-size: 1.4rem;

background-color: #f5f9fa;

border-top: 2px solid #ff9900;

box-shadow: 0 0 4px #ccc;

}

.product h2{

float:left;

width: 20%;

margin-top: 3rem;

text-align: center;

font-size: 2.4rem;

font-weight: normal;

color: #635c51;

}

.product h2 em{

display: block;

margin-top: 1rem;

font-size: 1.6rem;

}

.product h2 em:first-child{

margin-top:4rem;

}

.product .product-content{

float: right;

width: 79.5%;

border-left: 1px solid #eee;

background-color: #fff;

}

.product .product-content .item{

width: 100%;

}

.product .product-content .item+.item{

border-top: 1px solid #eee;

}

.product .product-content .item h3{

float: left;

width: 30%;

margin:1.5rem 0;

font-size: 1.4rem;

font-weight: normal;

text-align:center;

}

.product .product-content .item h3 em{

margin-right: 0.5rem;

font-size: 3.6rem;

font-size: normal;

color:#8b999d;

}

.product .product-content .item h3 i{

display: block;

font-size: 1.2rem;

font-style: normal;

color: #999;

}

.product .product-content .item .infor{

float: left;

width: 48%;

padding: 1rem;

border-left: 1px solid #eee;

border-right:1px solid #eee;

font-size: 14px;

}

.product .product-content .item .infor p{

float: left;

display: inline-block;

text-align: center;

width: 56%;

}

.product .product-content .item .infor p:last-child{

width: 40%;

}

.product .product-content .item .infor p span{

display: block;

font-size: 2.4rem;

color: #ff9900;

}

.product .product-content .item .infor p span i{

font-size: 1.2rem;

font-style: normal;

color: #999;

}

.product .product-content .item .buy{

float: left;

width: calc(22% - 4.4rem);

padding: 1rem;

}

.product .product-content .item .buy a{

display: block;

width: 90%;

margin:1.5rem auto;

max-width: 12rem;

line-height: 4rem;

text-align: center;

text-decoration: none;

color: #fff;

background-color: #ff9900;

border-radius: 5px;

}

.product .product-content .item .buy a:hover,

.product .product-content .item .buy a:active{

background-color: #ffc468;

}

.product .product-content .item .buy a.disabled{

background-color: #ccc !important;

}

写回答

1回答

姜维

2017-12-08

我这里倒是没有问题，是不是你 clearfix 的样式写的不对？

        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

祀未

对的我在css中没写clear：both。我是在html中加了个div 写的clear：both

2017-12-08

共1条回复

响应式开发一招致胜

用一套代码开发出不受设备型号、尺寸限制的互联网金融网站

4021 学习 · 752 问题

查看课程

相似问题

直接设置父元素宽高不行吗？还用清除浮动吗？

回答 1

clear:both算触发BFC吗?