浮動布局和定位布局為css中布局的常用的兩種布局方式，而且相容性會比較好。隨著flex的流行，以後會是主流，新的東西好用，相容不太好。ie10以下不相容flex布局。
float布局會脫離文件流，對頁面的布局造成影響，比如造成父級的高度坍塌等問題。清除浮動後，便不會影響文件流。下面介紹一下現在清除浮動的一些方式。
一、父級新增overflow: hidden；
子元素浮動了，會造成父元素的高度坍塌。只要給父元素新增overflow: hidden;屬性，就可以解決浮動帶來的影響。
二、通過屬性clear:both;達到清除浮動的目的；
元素浮動後，只需要在浮動元素新增多乙個塊級元素，並新增clear: both;屬性，便可以達到清除浮動的目的。
三、通過給父級元素新增偽類after，達到清除浮動的目的；
這種方式也是使用clear: both;的方式達到效果，只是變相的使用了偽類after，使得頁面結構更簡潔，也是常用的清理浮動的方式。
四、使用雙偽類；
此方式和三原理一樣，**更簡潔。
清除浮動的4種方式
css的三種定位機制 文件流，浮動，定位 html,相當重要的概念，在網頁中，標籤從上至下，從左至右，比方塊級元素，行內元素的預設排序我們稱之為普通流。這種布局方式稱之為普通流布局 浮動最早是用來控制，以便達到其他元素 特別是文字 實現 環繞 的效果。後來，發現浮動可以讓任何盒子同一行顯示，漸漸偏離...
清除浮動的4種方式
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題 如下 給父盒子設定乙個boder，內部放兩個盒子乙個big 乙個small，未給big和small設定浮動，則他們會預設撐開父盒子。當我給內部兩個盒子加上float屬性的時候 底部的footer盒子就會頂上來，然後父盒子因為沒設...
css清除浮動的種方式
我們在使用float浮動進行布局的時候知道一般需要給浮動的塊元素加上乙個父級元素，這樣元素浮動時才可以在父元素內部按照我們需要的方式進行布局，但是有乙個問題是如果父元素沒有給定高度的話當內部元素進行浮動之後父元素的高度就會是0，這是因為浮動的元素是處於標準流之外的。若是在一開始給定父元素乙個高度的話...