幻灯片效果，指示灯设置float:left脱离文档流后，超出边界后的奇葩情况...诚向各位请教！

Question

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

已知结构如下：

<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元素更是垂直排列....为何会出现这样的情况？
请各位大大不吝赐教！！

Answer 1

设置slider-control 的宽度然后用position定位，然后小圆点float处理

.slide .pointer{float: left;margin-top: 50px;margin-left: 150px; width:60px; 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}

Answer 2

1、关于第一个问题“三个小圆点上下的空白部分是怎么形成的？”。
这三个小圆点的“display”属性设置“inline-block”时，它们的“vertical-align”是默认值：baseline,也就是基线对齐,周围因此会产生空隙。
2、建议一个利用“text-align”属性对三个圆点排版，比如圆点在右下角
.slide .pointer{float: left;margin-top: 70px;text-align:right; width:60px; outline : 1px solid red;}

Answer 3

html {

overflow-y:scroll;

}

body {

margin:0 auto;
padding:29px00;
font:12px"\5B8B\4F53",sans-serif;
background:#ffffff;

}

div,i{

padding:0;
margin:0;

}

.slide{

position: relative;
width: 200px;
height: 100px;
background-color:#bdd7ee;

}

.pointer{

float: left;
margin-top: 79px;
margin-left: 151px;

}

.pointer i{

display: inline-block;
width: 10px;
height: 10px;
margin-left: -1px;
margin-top: -1px;
line-height: 10px;
border-radius: 50%;
background-color: #000000;

}

.pointer i.current{

background-color: #ffffff;

}
这是修改后的CSS，这就可以实现了