在采用bootstrap最新版本V3開發(fā)系統(tǒng)框架時，參考了一個基于2.xx版本的框架結(jié)構。
上方一個header，設定高度定值，寬度100%；
左側(cè)div采用浮動，float:left，設置寬度200px，右側(cè)不設置浮動，寬度自適應，則會制作出一個左側(cè)固定，右側(cè)占據(jù)剩余100%的div。
形成上、左、右的結(jié)構。效果圖如下：
融合了bootstrap3強大的響應式布局理念后，在繼續(xù)縮小寬度，左側(cè)會自動取消浮動，占據(jù)寬度100%，變成豎著打開的菜單，效果就是這樣了，具體細節(jié)不是這次討論的主題。
所遇到的問題就出現(xiàn)了，當點擊左側(cè)的下拉菜單時，會導致右側(cè)的第一欄車輛基本信息內(nèi)的高度增加，很詭異的跟著左側(cè)下拉菜單的動畫效果，也增長了！效果圖：
換了火狐、谷歌、IE10，效果都是這樣，不同的是有的瀏覽器會高一些。
既然出現(xiàn)了問題，開始分析：
1、先嘗試在開發(fā)工具中對左側(cè)的nav菜單設置高度，果然，設置高度后，右側(cè)也增高了。所以問題暫時定位在左側(cè)高度處理上，嘗試了height、max-height后，發(fā)現(xiàn)并非如此，但max-height設置大了后，右側(cè)所跟隨變大的也會變大。
結(jié)論是：右側(cè)增高的高度，與左側(cè)的高度相同。
左側(cè)代碼：
<nav id="sidebar" class="collapse navbar-collapse">
<ul>
<li class="active"><a href="index.html"><i class="glyphicon glyphicon-home"></i> <span>系統(tǒng)首頁</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>系統(tǒng)管理</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>系統(tǒng)管理</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>系統(tǒng)管理</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>系統(tǒng)管理</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、是不是右側(cè)的菜單出現(xiàn)了什么特殊的屬性導致？
<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">聯(lián)系方式：</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;
}
終于產(chǎn)生效果了，高度正常了。
原來是在這里對浮動進行了清除，而清除浮動不管位置如何，都重新計算了原浮動元素的高度，并且有種卡在清除浮動代碼的這個位置。
結(jié)論：clear: both;不管位置在那，都會清除浮動，并且重新計算高度。
由于盡量不破壞bootstrap的代碼包，而對定義好的.panel-body:after進行重寫，是不妥當?shù)?，影響了頁面下方的布局?/span>
所以針對這個原因的嘗試解決辦法是：
1、笨方法，在開頭放沒有此類清除浮動屬性的標簽，把這個距離頂出去，這樣浮動的bug就算發(fā)生，也沒有表現(xiàn)了。對付對付可以，但實際使用中這是不現(xiàn)實的。。。
2、左側(cè)結(jié)尾處增加清除浮動標簽，清除了會占據(jù)100%寬度，導致右側(cè)主體內(nèi)容換行。PASS
最后的解決辦法是將左側(cè)的浮動轉(zhuǎn)換為絕對定位，將float:left改寫為position:absolute，問題解決了。遺憾的是這個解決方案對于此項目好用，但不一定通用。
描寫這么詳細，也是希望有遇到、解決同樣問題的朋友能夠分享一下心得與解決方案。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設。