小白專場，大佬繞道。本文有錯，歡迎指出。不喜勿噴，和諧社會！
什麼是浮動
概念：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，是以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
大兄弟你該不會真的把概念讀完并且嘗試了解它？要是真的話，我隻能說一句“你牛批”。
小白是不需要去了解概念的，隻需要知道效果到底是啥樣的就ok了。
先看預設情況下的
html:
<div class="fuyuansu"><!-- 父元素 -->
<div class="zuo"></div><!-- 左元素 -->
<div class="you"></div><!-- 右元素 -->
</div>
css:
.fuyuansu{
width: 300px;
border: 1px solid #ccc;
}
.zuo{
width: 100px;
height: 100px;
background: red;
}
.you{
width: 100px;
height: 100px;
background: blue;
}
效果圖：
塊級元素預設是獨占整行，當想讓div不獨占整行，而是并排排列時，其中一種方法就是讓元素浮動。
css代碼修改為：
.fuyuansu{
width: 300px;
border: 1px solid #ccc;
}
.zuo{
width: 100px;
height: 100px;
background: red;
float: left;/*左浮動*/
}
.you{
width: 100px;
height: 100px;
background: blue;
float: right;/*右浮動*/
}
效果就變成了這樣
添加浮動之後你會發現，元素并排了，但是父元素高度坍塌了。是以想讓父元素重新擁有高度，我們就要做“清除浮動”。
清除浮動的方法很多，這裡隻介紹幾種常用的：
方法一：給父元素添加overflow屬性
css代碼更新為：
.fuyuansu{
width: 300px;
border: 1px solid #ccc;
overflow: hidden;/*添加overflow屬性，值可以選擇hidden或者auto*/
}
效果圖：
優點：簡單粗暴直接，代碼量少，一個屬性直接搞定。
缺點：當overflow的值設定為hidden的時候，會出現元素溢出隐藏效果。當overflow的值設定為auto的時候，元素超出父元素時，父元素會出現滾動條。
方法二：在浮動元素後面添加一個帶有clear屬性的div
html：
<div class="fuyuansu"><!-- 父元素 -->
<div class="zuo"></div><!-- 左浮動元素 -->
<div class="you"></div><!-- 右浮動元素 -->
<div class="clear"></div>
</div>
css:
.fuyuansu{
width: 300px;
border: 1px solid #ccc;
}
.zuo{
width: 100px;
height: 100px;
background: red;
float: left;/*左浮動*/
}
.you{
width: 100px;
height: 100px;
background: blue;
float: right;/*右浮動*/
}
.clear{
clear: both;/*添加clear:both,使這個div的左右兩側不允許浮動元素。*/
}
效果圖：
優點：不會影響父元素或者子元素的樣式。
缺點：會有備援的頁面元素，影響代碼維護
方法三：使用父元素的after僞元素并添加clear:both （重點推薦）
第一步：定義一個樣式名，給樣式的僞元素添加clear:both
css:
.clearfix:after{
content: "."; /*為什麼要添加content？ 因為不加content僞元素不會出現*/
height: 0px;/*為什麼設定為height？ 将height設定為0，僞元素在頁面中就不會占用位置，不會影響其他元素布局*/
visibility: hidden;/*不知道這個屬性幹嘛用的就去百度，這裡不解釋*/
display: block;/*為什麼設定成塊級？因為行内元素不能生效*/
clear: both;/*元素左右兩邊不允許存在浮動元素*/
}
第二步：将新定義的樣式名，添加到浮動元素的父元素上去
<div class="fuyuansu clearfix"><!-- 父元素 -->
<div class="zuo"></div><!-- 左浮動元素 -->
<div class="you"></div><!-- 右浮動元素 -->
</div>
效果就會是這樣
為什麼會這樣嘞？我們打開控制台檢查一下頁面元素
從控制台我們可以看到，僞元素在頁面中位置，位于父元素内部的最底部，你回頭看看方法二就會發現，這個僞元素的位置和方法二中添加的clear這個div的位置是一樣的。是以方法三的原理和方法二的原理是一樣的，都是通過添加帶有在clear:both屬性的元素在父元素内部的底部位置，來達到清除浮動效果。
這個方法是目前清除浮動最常用的方法，優點在于代碼中不會出現備援的代碼，便于以後代碼的維護，另外就複用性高，定義一個樣式名，在需要清除浮動的地方就添加這個樣式。做到“一次定義，多次使用”。由于樣式是定義在僞元素上的，是以不會影響其他元素的樣式。
接下來，我們來優化一下方法三
先來簡化一下代碼，這樣書寫代碼也能達到上面一樣的效果。
.clearfix:after{
display: table;
content: "";
clear: both;
}
為了相容IE6，IE7浏覽器，我們将代碼修改為
.clearfix{
*zoom:1;
}
.clearfix:after{
display: table;
content: "";
clear: both;
}
為了解決現代浏覽器上邊距折疊問題，我們還要再加入一些代碼
.clearfix{
*zoom:1;
}
.clearfix:after{
display: table;
content: "";
clear: both;
}
.clearfix:before{ /*解決現在浏覽器上邊距折疊問題*/
display: table;
content: "";
}
再把添加的代碼優化一下，就變成了
.clearfix{
*zoom:1;
}
.clearfix:after,.clearfix:before{
display: table;
content: "";
}
.clearfix:after{
clear: both;
}
總結一下，推薦的清除浮動方法就是
html :
<div class="fuyuansu clearfix"><!-- 父元素 -->
<div class="zuo"></div><!-- 左浮動元素 -->
<div class="you"></div><!-- 右浮動元素 -->
</div>
css:
.fuyuansu{
width: 300px;
border: 1px solid #ccc;
}
.zuo{
width: 100px;
height: 100px;
background: red;
float: left;/*左浮動*/
}
.you{
width: 100px;
height: 100px;
background: blue;
float: right;/*右浮動*/
}
.clearfix{
*zoom:1;
}
.clearfix:after,.clearfix:before{
display: table;
content: "";
}
.clearfix:after{
clear: both;
}
寫在最後：你努力的樣子，是我這輩子見過最帥的模樣