1.问题
有时候写前端html时,设定div元素浮动,会导致无法显示。
如:
2.解决方法
这时候可以用clear:both清除浮动
示例代码:
<div class="d-c">
<img src="img/hengfu1.jpg" style="width:1140px">
<div>
<div class="electric">
<h2>1F 杯子系列</h2>
<ul>
<li><a href="#">更多></a></li>
</ul>
</div>
<div class="electric-column-1">
<div class="electric-text">
<div style="background-color: aquamarine;"><a href="#">单层纸杯</a></div>
<div><a href="#">双层纸杯</a></div>
</div>
<div class="electric-text">
<div><a href="#">瓦楞纸杯</a></div>
<div><a href="#">PET透明杯</a></div>
</div>
<div class="electric-text">
<div><a href="#">冰淇淋杯</a></div>
<div><a href="#">更多>></a></div>
</div>
<img src="img/flListimg.jpg" />
</div>
<div class="electric-column-5">
<img src="img/rdPro4 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro2 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
<div class="electric-column-5">
<img src="img/rdPro5 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro3 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
<div class="electric-column-5">
<img src="img/rdPro3 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro5 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
<div class="electric-column-5">
<img src="img/rdPro2 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro5 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
<div class="d-c">
<img src="img/hengfu2.jpg" style="width:1140px">
<div>
<div class="electric">
<h2>2F 餐具系列</h2>
<ul>
<li><a href="#">更多></a></li>
</ul>
</div>
<div class="electric-column-1">
<div class="electric-text">
<div><a href="#">蛋糕</a></div>
<div><a href="#">沙拉</a></div>
</div>
<div class="electric-text">
<div><a href="#">西餐</a></div>
<div><a href="#">中餐</a></div>
</div>
<div class="electric-text">
<div><a href="#">外带打包</a></div>
<div><a href="#">更多>></a></div>
</div>
<img src="img/flListimg.jpg" />
</div>
<div class="electric-column-5">
<img src="img/rdPro3 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro2 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
<div class="electric-column-5">
<img src="img/rdPro5 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro3 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
<div class="electric-column-5">
<img src="img/rdPro3 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro4 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
<div class="electric-column-5">
<img src="img/rdPro2 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
<img src="img/rdPro5 copy.jpg" />
<p>妙洁 一次性纸杯 8盎司228ml 100只/袋 20袋/箱</p>
<p style="color: rgb(214, 179, 122);">¥ 19.80/袋</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
这是两段div元素,用了这句代码清除浮动。
<div style="clear: both;"></div>
下面是改正过的页面,可以正常显示了。