一、清除浮動(dòng)需求 ( 沒(méi)有設(shè)置高度的盒子且內(nèi)部設(shè)置了浮動(dòng) )
繪制的如下模塊 :
在上面的盒子中 , 沒(méi)有設(shè)置高度 , 只設(shè)置了一個(gè) 1215px 的寬度 ;
在列表中每個(gè)列表項(xiàng)都設(shè)置了 浮動(dòng) ;
/* 網(wǎng)格商品展示 */
.box-bd {
/* 處理列表間隙導(dǎo)致意外換行問(wèn)題
一排有 5 個(gè) 228x270 的盒子 , 其中間隙 15 像素
228 * 5 + 15 * 4 = 1200 像素 ,
但是最后一個(gè)盒子右側(cè)添加 15 像素的右邊距地話(huà) ,
會(huì)導(dǎo)致最后一個(gè)元素掉到第二行 ,
這里需要將盒子寬度從 1200 像素修改為 1215 像素
正好放 5 盒子 + 5 間隙*/
width: 1215px;
}
/* 網(wǎng)格中 ul 列表中每個(gè)列表項(xiàng)樣式 */
.box-bd li {
/* 設(shè)置左浮動(dòng) 讓列表項(xiàng)在一行中從左到右排列 */
float: left;
/* 設(shè)置尺寸 228 x 270 */
width: 228px;
height: 270px;
/* 設(shè)置右邊距和下邊距 */
margin-right: 15px;
margin-bottom: 15px;
/* 設(shè)置背景顏色 - 白色 */
background-color: #fff;
/* 設(shè)置盒子模型的陰影 */
box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
?
之前的盒子都設(shè)置了高度 , 因此其中雖然設(shè)置了浮動(dòng) , 但不會(huì)影響到后續(xù)的頁(yè)面布局 ;
上述模型中 , 沒(méi)有設(shè)置高度 , 并且設(shè)置了浮動(dòng) , 如果不清除浮動(dòng) , 后續(xù)排列都會(huì)出現(xiàn)問(wèn)題 ;
使用
/* 清除浮動(dòng) - 使用雙偽元素清除浮動(dòng) */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
清除浮動(dòng) ;
清除浮動(dòng)時(shí) , 給要清除浮動(dòng)的 父容器 , 設(shè)置 clearfix 樣式 ;
二、清除浮動(dòng)代碼示例
首先 , 在 CSS 樣式中 , 定義 使用雙偽元素清除浮動(dòng) 的樣式 ;文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-686131.html
/* 清除浮動(dòng) - 使用雙偽元素清除浮動(dòng) */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
然后 , 在 HTML 標(biāo)簽結(jié)構(gòu)中 ,?<ul>?標(biāo)簽的上一層父容器中 , 設(shè)置清除浮動(dòng) ;文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-686131.html
<!-- 網(wǎng)格商品展示模塊 - 開(kāi)始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推薦</h3>
<a href="#">查看全部</a>
</div>
<!-- 沒(méi)有設(shè)置高度 內(nèi)部有浮動(dòng) 必須清除浮動(dòng) -->
<div class="box-bd clearfix">
<ul>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1200人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<img src="images/pic.jpg" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4>
<p><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</p>
</li>
</ul>
</div>
</div>
<!-- 網(wǎng)格商品展示模塊 - 結(jié)束 -->
到了這里，關(guān)于【CSS】網(wǎng)站 網(wǎng)格商品展示 模塊制作 ( 清除浮動(dòng)需求 | 沒(méi)有設(shè)置高度的盒子且內(nèi)部設(shè)置了浮動(dòng) | 使用雙偽元素清除浮動(dòng) )的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
