CSS - Float排版問題

紀錄一下 Float 排版問題

問題:

在練習 Bootstrap3 將表單驗證功能加進去,卻遇到畫面「跑版」的問題,
目前是查到 「名稱」底下的
<div class="help-block with-errors"></div>
所導致。

可能原因為 float? margin?

問題點: 1.單點 「名稱」欄位,就會造成下方欄位跑版。
2.若同時有驗證 左右二邊,欄位又有對齊了。

codepen:排版偏移程式碼

解決:



如上圖所述,第一個「名稱」腳變長,造成第三個「Email」排不進去被往後推,
導致第四個「聯絡電話」也被往後推擠,造成排版歪掉。



解法為 外層用 row 包起來,清除 float 的浮動(clearfix)

codepen:修正後程式碼