问题背景：
一个幻灯片效果如图：

已知结构如下：

 <div class="slide">
    <div class="pointer"><i class="current"></i><i></i><i></i></div>
</div>

要求如效果图中标注，幻灯（slide）宽200px，高100px，指示器（pointer）在右下角，距离右边10px距离下边10px，指示器中的三个圆直径为10px，背景为黑色，间距为5px，当前选中项（current）为白色背景.

我的思路：
要使右下角的指示器元素 div[.pointer] 处于图片上方右下角，距离右边框10px，距下边框10px的位置，那么，必然要使 div[.pointer] 从 normal flow 中脱离出来。
使用position:absolute倒没什么问题，但这里我突发奇想的想对 div[.pointer] 设置float:left来实现， 那么问题来了：

css代码如下：

 body{margin: 0 auto;}    
.slide{position: relative;width: 200px;height: 100px;background-color:#bdd7ee;}
.slide .pointer{float: left;margin-top: 50px;margin-left: 150px;outline  : 1px solid red;}
.pointer i{display: inline-block;width: 10px;height: 10px;margin-left: 5px;border-radius: 50%;background-color: #000;outline: 1px solid red;}
.pointer i.current{background-color: #fff}

状况描述：
当div[class=pointer]margin-left为150px,margin-top为50px时，总体还没超出div[class=slide]区域，如下图1：

但是当margin-left为180px，margin-top为80px时，情况如下图2：

当margin-left为200px，margin-top为100px时，情况如下图3：

问题：
⑴在图一中，三个小圆点上下的空白部分是怎么形成的？div[class=pointer]我并没有设置高度，高度按理说应该是里面内容的高度吧...我试过为div[class=pointer]添加padding:0px还有给 i元素 添加margin:0px ,并没有消除；但是给 i元素 添加float:left倒是可以消除...为什么会出现这种情况呢？
⑵在图二中我们可以看到，inline-block元素 i元素 被挤出去了；在图三中，三个inline-block元素更是垂直排列....为何会出现这样的情况？
请各位大大不吝赐教！！