CSS清除div擋板
在網頁設計中，經常會遇到一個問題，那就是當多個div并排顯示時，有時會出現一個div擋住了其他的div，造成顯示效果不理想。這是因為CSS中，div的默認屬性是block，會在一行中占據整個寬度。為了解決這個問題，我們可以使用CSS的清除div擋板的方法。
方法一：使用clearfix清除浮動
清除div擋板的常見方法是使用clearfix技術。該技術通過給父級元素添加clearfix類來清除浮動，以實現正常的布局效果。具體代碼如下：

.clearfix::after {
content: "";
display: table;
clear: both;
}

然后，通過在父級元素的class屬性中添加clearfix類，就可以清除div擋板的問題，例如：

<div class="clearfix">
<div class="float-left">左側div</div>
<div class="float-right">右側div</div>
</div>

方法二：使用Flexbox布局
Flexbox是CSS3中的新屬性，可以實現靈活的布局效果，也可以用來清除div擋板。通過設置父級元素的display屬性為flex或者inline-flex，配合flex-direction屬性，可以使子元素按照指定的方向進行布局。具體代碼如下：

.flex-container {
display: flex;
flex-direction: row;
}
<br>
.flex-item {
flex: 1;
}

然后，將需要布局的div包裹在一個具有flex-container類的父級元素中，每個子元素都具有flex-item類即可。例如：

<div class="flex-container">
<div class="flex-item">左側div</div>
<div class="flex-item">右側div</div>
</div>

方法三：使用grid布局
CSS Grid布局是CSS3中另一個用于網格化布局的屬性。通過將父級元素的display屬性設置為grid，配合grid-template-columns屬性，可以將元素按照行和列進行布局。具體代碼如下：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}

然后，將需要布局的div包裹在一個具有grid-container類的父級元素中，每個子元素都會被平均分配到指定數量的列中。例如：

<div class="grid-container">
<div>左側div</div>
<div>右側div</div>
</div>

這三種方法都可以有效地清除div擋板的問題，根據具體情況選擇合適的方法來實現網頁的布局。
參考文章： - [CSS clearfix: 清除浮動 (Containing Floats) [翻譯]](https://www.zhangxinxu.com/wordpress/2010/03/css-clearfix-containing-float/) - [Flexbox布局教程](https://www.runoob.com/w3cnote/flex-grammar.html) - [CSS Grid布局教程](https://www.runoob.com/w3cnote/css3-grid-layout-guide.html)
綜上所述，清除div擋板的方法有很多種，比如使用clearfix清除浮動、Flexbox布局和CSS Grid布局等。根據具體情況選擇合適的方法，可以實現網頁布局的靈活性和美觀性。