html常见小问题及解决方法

一、解决图像下方多出的3px问题

产生的原因主要是由图片的垂直对齐方式vertical-align引发的，默认对齐方式为base-line；

解决方案：

1、将图片的垂直对齐方式vertical-align更改为 bottom；

2、将图片display设置为block，并且指定width 和  height；

3、设置图片所在的容器元素的width和height与图片一样。

二、当hover效果加边框时移动的问题

解决方案：给原始状态加一个透明边框

三、浮动问题

问题：子级元素的浮动，为父层元素所带来的影响，如果一个元素的所有子级内容都是浮动的，那么它的高度会变成 0；

解决方案：

1、设置父容器高度

2、设置父元素的 overflow:hidden;

3、在父元素中，增加一个空元素，添加clear:both;

问题：如果上面元素浮动的话可能会影响下面的元素，
这时候可以给下面的元素加上一个清除浮动：
clear：both/left/right,或者在这个元素之前加一个空元素，清除浮动。