height和line-height也能影响浮动效果

今天做一个浮动效果，使用了float始终得不到效果，后来反复修改，发觉margin和height也能影响浮动效果。

我所需效果如下：

当代码为下时：

<div id="centerTab" class="tabs" data-options="fit:true">   
    	<div title="step" data-options="fit:true">
    		<div style="width:100%;background:#EFF5FF">
	    		<div class="col75">消息分割:</div>
	    		<div style="float: left;width: 1000px;margin: 5px 0px 5px 10px;">
	    			<input id="messageSegment" type="text" value="tem['subject']" style="width:100%"/>
	    		</div>
	    		<div class="col75">映射:</div>
	    		<div style="float: left;width: 1000px;margin: 5px 0px 5px 10px;">
	    			<input id="messageSegment" type="text" value="tem['subject']" style="width:100%"/>
	    		</div>
	    		<div class="col75">默认值:</div>
	    		<div style="  float: left;width: 1000px;margin: 5px 0px 5px 10px;">
	    			<input id="messageSegment" type="text" value="tem['subject']" style="width:100%"/>
	    		</div>
	    		<div class="clr"></div>
    		</div>
	</div> 
    	<div title="template" data-options="fit:true">12334</div>
</div> 

效果如下：

col75的样式为：

.col75{	
	width: 65px;
	float: left;
	text-align: left;
	height: 25px;
	line-height: 25px;
	margin: 5px 0px 5px 10px;
}

经多方尝试发现有多种方式可以实现要求效果：

  1.去掉col75样式中的margin属性；

  2.去掉col75样式中的height和line-height属性，必须同时去掉

  3.为div添加属性height:25px;

  

以上3种方式均可以实现效果，具体原理，我也没弄明白，如有知道的兄弟请留言指导一下，不胜感谢！

line-height：是上一行文本的中线和下一行文本的中线间的间距。