如何解決因float帶來的排版問題？

浮動形成的常見問題有哪些？

兄弟元素排版錯亂

• 內聯元素（行內元素）
  若是該兄弟元素是內聯元素，內聯元素會盡量的圍繞在浮動元素的周圍
  

• 塊級元素
  若是該兄弟元素是塊等元素，塊級元素會無視浮動元素，而且必定程度的覆蓋浮動元素，
  文本是屬於行內匿名元素，因此會浮動在內聯元素周圍，實際div已經嘗試了覆蓋
  會在元素換行上有疑問，或許你還會想着經過寬度來解決這個換行問題
  

父元素塌陷問題

由於元素浮動，和未浮動的父元素不在同一個文檔流當中，浮動的元素不能撐起來父元素的高度

爲何會形成這種現象？

使用用浮動會讓元素脫離普通流，完成各類定位的同時，會帶來了許多後遺症

如何解決浮動帶來的問題？

方法一：clear：both

• 含義
  不容許改元素的兩邊有浮動的元素

• 使用狀況
  更適合用於須要換行，卻因浮動換行失敗的狀況

• 空div是什麼個意思？
  換行也存在兩種可能性，一種是他緊鄰的兄弟元素要換行，那再這個元素上直接添加clear:both就好，
  還有一種是這個元素接下來的元素都要換行，那麼咱們就悄悄的呢添加一個其實沒有任何意義的div，寫上一個類，裏面有clear:both;
  還要有height:或者0 line-height: 0;要否則會換行了背景仍是會塌陷

方法二：overflow：hidden/auto

• 含義
  overflow 屬性規定當內容溢出元素框時發生的事情。
  hidden 內容會被修剪，而且其他內容是不可見的。
  auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
  auto對seo較爲友好

• 使用狀況
  float形成的盒子塌陷

• 爲何不是裁剪跨出邊界的元素，反而是撐高？
  牽涉到BFC機制，overflow:hidden 的意思是超出的部分要裁切隱藏掉，
  那麼若是float 的元素不佔普通流位置普通流的包含塊要根據內容高度裁切隱藏，
  若是高度是默認值auto那麼不計算其內浮動元素高度就裁切就有可能會裁掉float，
  這是反佈局常識的， 因此若是沒有明確設定容器高狀況下它要計算內容所有高度才能肯定在什麼位置， hidden浮動的高度就要被計算進去順帶達成了清理浮動的目標。
  簡單說就是overflow會開啓一個計算高度的機制，而這個機制的計算包括float

• 兼容性
  IE6 中須要觸發 hasLayout ——爲父元素設置容器寬高或設置 zoom：1

方法三：:after僞元素法(兼容性各方面綜合最佳)

• 含義
  after 選擇器在被選元素的內容後面插入內容。
  用 content 屬性來指定要插入的內容。有點貴像空div的高級版

• 寫法一

<style>
        .clearfix {/* 觸發 hasLayout */ zoom: 1; }
        .clearfix:after {
         content: "";
         display: block; height: 0; 
         clear: both; visibility: hidden; }
    </style>
     <div class="wrap ">
        <div class="pic1">div-float:left</div>
        <div class="pic3">div-float:left</div>
        <div class="pic4">div-float:left</div>
        <div class="pic2">div-無float</div>
    </div>
    <div>第二個大盒子</div>

• 寫法二

.clearfix:before, .clearfix:after {
       content:"";
       display:table;
   }
   .clearfix:after{
       clear:both;
       overflow:hidden;
   }
   .clearfix{
       zoom:1;
   }

• 解析
  用after:僞元素在須要清除浮動的大盒子外邊添加了一個看不見（visibility）可是有高度（高度爲0）的空內容塊。
  visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來。
  display:table,這個元素的做用就像 <table> 元素.
  它定義了一個塊級盒子.有兩個特性同行等高,寬度自動調節。

參考資料

1.kayo博客
2.知乎