比如，我們需要實現一個類似表單的樣式，采用bootstrap的柵格系統，使用col-md-4，每行分成3等分，如下圖：

第一“坑”；文字內容高度變化增大時，下面的會覆蓋掉

就如上面的案例，然而當某一等分的子元素內容增多，由于寬度固定了，內容會一直往下撐大，但是隨之問題來了，下一行的元素被覆蓋，這種效果明顯不是我們所想要的。

第二“坑”：文字內容高度變化增大時，下一行的內容并非在新的一行開始

這種效果就更奇葩了，然而當某一等分的子元素內容增多，由于寬度固定了，內容會一直往下撐大，但是隨之問題來了，下一行的元素雖然沒有被覆蓋，但是并不是從第一個位置開始，而是緊接著高度變化的元素下方開始，這種也不是我們想要的效果。

分析：

為啥會出現這些奇葩的“特效”呢？通過查看css樣式我們會發現，bootstrap框架底層實現3等分的原理是采用了width:33.33%; float:left; 。看到這2個樣式有沒有一種恍然大悟的感覺，沒錯，就是因為浮動的原因引起的。浮動元素脫離了文檔流就不會有高度，子元素高度變大并不會撐開父元素的高度，所以就會覆蓋下一行的元素的內容。而所有元素都是左浮動，所以自然是靠左對齊，當某個元素高度變大了，那么后面的元素浮動就只能貼著它開始排列。

改進方案：

既然我們知道問題出現在浮動，那么解決起來就簡單。

1 使用偽元素清除浮動（推薦）

給父級元素設置清除浮動，使用偽元素：after或者：before

2 不使用浮動，自定義css樣式（推薦）

給 col-md-4 這個 class 自定義css 樣式：

float:none; ?display:inline-block ?/ inline-table / inline-flex;

3 ?保持樣式不變，改html結構（不建議使用）

每行用一個 row 容器包裹3個等分，這個實現起來不好操作，因為數據是動態返回來的，需要循環遍歷，也不方便維護

4 js 動態計算子元素的高度，把最大的賦值給父元素（不推薦）

因為浮動的元素高度沒了，那么通過js也可以動態設置，這種方法需要遍歷，影響性能

? 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種解決方案，當然還會有其他方案我沒想到的，推薦使用第一第二種，操作簡易，維護也方便。