在采用bootstrap最新版本V3开发系统框架时，参考了一个基于2.xx版本的框架结构。
上方一个header，设定高度定值，宽度100%；
左侧div采用浮动，float:left，设置宽度200px，右侧不设置浮动，宽度自适应，则会制作出一个左侧固定，右侧占据剩余100%的div。
形成上、左、右的结构。效果图如下：
融合了bootstrap3强大的响应式布局理念后，在继续缩小宽度，左侧会自动取消浮动，占据宽度100%，变成竖着打开的菜单，效果就是这样了，具体细节不是这次讨论的主题。
所遇到的问题就出现了，当点击左侧的下拉菜单时，会导致右侧的第一栏车辆基本信息内的高度增加，很诡异的跟着左侧下拉菜单的动画效果，也增长了！效果图：
换了火狐、谷歌、IE10，效果都是这样，不同的是有的浏览器会高一些。
既然出现了问题，开始分析：
1、先尝试在开发工具中对左侧的nav菜单设置高度，果然，设置高度后，右侧也增高了。所以问题暂时定位在左侧高度处理上，尝试了height、max-height后，发现并非如此，但max-height设置大了后，右侧所跟随变大的也会变大。
结论是：右侧增高的高度，与左侧的高度相同。
左侧代码：
<nav id="sidebar" class="collapse navbar-collapse">
<ul>
<li class="active"><a href="index.html"><i class="glyphicon glyphicon-home"></i> <span>系统首页</span></a> </li>
<li> <a href="#"><i class="glyphicon glyphicon-list"></i> <span>车辆查询</span></a> </li>
<li> <a href="#"><i class="glyphicon glyphicon-edit"></i> <span>新维护单</span></a> </li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系统管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系统管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
<li><a href="#">用户管理</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系统管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="glyphicon glyphicon-cog"></i> <span>系统管理</span> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul>
<li><a href="#">基本配置</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">基本配置</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">基本配置</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">基本配置</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
</ul>
</li>
</ul>
</nav>
#sidebar { position:absolute;width: 200px; z-index: 16; margin-left:-15px;}
2、是不是右侧的菜单出现了什么特殊的属性导致？
<div class="panel-heading">
<h3 class="panel-title">车辆基本信息</h3>
</div>
<div class="panel-body spicel">
<div class="row">
<div class="col-md-4 col-sm-6 form-group"><label for="cph">车牌号：</label><input type="text" name="cph" placeholder="例如：黑A 88888号" class="form-control" /></div>
<div class="col-md-4 col-sm-6 form-group"><label for="jsy">驾驶员：</label><input type="text" name="jsy" placeholder="例如：张三" class="form-control" /></div>
<div class="col-md-4 col-sm-6 form-group"><label for="lxfs">联系方式：</label><input type="text" name="lxfs" placeholder="例如：13904512345" class="form-control" /></div>
</div>
</div>
实际效果中css代码：
box-sizing: border-box; color: rgb(51, 51, 51); display: block; font-family: 'Microsoft YaHei', 宋体, Tahoma, Helvetica, Arial, 宋体, sans-serif; font-size: 12px; height: 172px; line-height: 17px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 566px;
分别注销属性进行测试，当注销到：
.panel-body:after {
clear: both;
}
终于产生效果了，高度正常了。
原来是在这里对浮动进行了清除，而清除浮动不管位置如何，都重新计算了原浮动元素的高度，并且有种卡在清除浮动代码的这个位置。
结论：clear: both;不管位置在那，都会清除浮动，并且重新计算高度。
由于尽量不破坏bootstrap的代码包，而对定义好的.panel-body:after进行重写，是不妥当的，影响了页面下方的布局。
所以针对这个原因的尝试解决办法是：
1、笨方法，在开头放没有此类清除浮动属性的标签，把这个距离顶出去，这样浮动的bug就算发生，也没有表现了。对付对付可以，但实际使用中这是不现实的。。。
2、左侧结尾处增加清除浮动标签，清除了会占据100%宽度，导致右侧主体内容换行。PASS
最后的解决办法是将左侧的浮动转换为绝对定位，将float:left改写为position:absolute，问题解决了。遗憾的是这个解决方案对于此项目好用，但不一定通用。
描写这么详细，也是希望有遇到、解决同样问题的朋友能够分享一下心得与解决方案。
哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站，并且能够搭建符合百度排名规范的网站基底，使您的网站无需额外费用，即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设。