比如跨算，我們需要實現(xiàn)一個類似表單的樣式爆土，采用bootstrap的柵格系統(tǒng)，使用col-md-4诸蚕，每行分成3等分步势，如下圖：
第一“坑”；文字內(nèi)容高度變化增大時背犯，下面的會覆蓋掉
就如上面的案例坏瘩，然而當某一等分的子元素內(nèi)容增多，由于寬度固定了漠魏，內(nèi)容會一直往下?lián)未缶蠓请S之問題來了，下一行的元素被覆蓋柱锹，這種效果明顯不是我們所想要的哪自。
第二“坑”：文字內(nèi)容高度變化增大時，下一行的內(nèi)容并非在新的一行開始
這種效果就更奇葩了奕纫，然而當某一等分的子元素內(nèi)容增多提陶，由于寬度固定了，內(nèi)容會一直往下?lián)未笃ゲ悖请S之問題來了隙笆，下一行的元素雖然沒有被覆蓋锌蓄，但是并不是從第一個位置開始，而是緊接著高度變化的元素下方開始撑柔，這種也不是我們想要的效果瘸爽。
分析：
為啥會出現(xiàn)這些奇葩的“特效”呢？通過查看css樣式我們會發(fā)現(xiàn)铅忿，bootstrap框架底層實現(xiàn)3等分的原理是采用了width:33.33%; float:left; 剪决。看到這2個樣式有沒有一種恍然大悟的感覺檀训，沒錯柑潦，就是因為浮動的原因引起的。浮動元素脫離了文檔流就不會有高度峻凫，子元素高度變大并不會撐開父元素的高度渗鬼，所以就會覆蓋下一行的元素的內(nèi)容。而所有元素都是左浮動荧琼，所以自然是靠左對齊譬胎，當某個元素高度變大了，那么后面的元素浮動就只能貼著它開始排列命锄。
改進方案：
既然我們知道問題出現(xiàn)在浮動堰乔，那么解決起來就簡單。
1 使用偽元素清除浮動（推薦）
給父級元素設置清除浮動脐恩，使用偽元素：after或者：before
2 不使用浮動镐侯，自定義css樣式（推薦）
給 col-md-4 這個 class 自定義css 樣式：
float:none; ?display:inline-block ?/ inline-table / inline-flex;
3 ?保持樣式不變，改html結(jié)構(gòu)（不建議使用）
每行用一個 row 容器包裹3個等分被盈，這個實現(xiàn)起來不好操作析孽，因為數(shù)據(jù)是動態(tài)返回來的，需要循環(huán)遍歷只怎，也不方便維護
4 js 動態(tài)計算子元素的高度袜瞬，把最大的賦值給父元素（不推薦）
因為浮動的元素高度沒了，那么通過js也可以動態(tài)設置身堡，這種方法需要遍歷邓尤，影響性能
? var maxH = 0;
? $('.col-md-4').each(function (index,ele) {
? ? if($(ele).children().height() >maxH){
? ? ? maxH = $(ele).children().height();
? ? ?$(this).css('height',maxH+'px')
? ? }
? maxH = 0;
? })
以上給出4種解決方案，當然還會有其他方案我沒想到的贴谎，推薦使用第一第二種汞扎，操作簡易，維護也方便擅这。
