浮動
語法：
float：left|right|none
一句話理解：
浮動可以理解為豌骏，讓某個元素脫離標準流（從左到右，自上而下排列）焙蹭，漂浮在標準流之上；
- 當一個元素浮動后嫂伞，他會脫離正常的文檔流孔厉，然后向左或向右水平移動拯钻，一直平移到所處容器的包含框（邊框），或者碰到另一個浮動元素的邊框烟馅。
（呈現(xiàn)為：緊貼著上一個元素的邊说庭，如果一行塞不下的話，那么B元素會被擠到下一行）郑趁；
- 如果浮動元素的上一個元素是標準文檔流中的元素（即沒有浮動）刊驴，那么浮動元素相對于上一個文檔流中的元素的相對垂直位置就不會變
（顯示效果：浮動元素總會保證自己的top與上一個普通元素的bottom對齊，也就是寡润，浮動在包圍元素的邊上）
- 浮動的元素順序是根據(jù)HTML中的元素順序決定的捆憎，也就是按照瀏覽器渲染順序決定排序；
清除浮動
一句話理解：
清除浮動可以理解為打破元素之間的橫向排列
clear元素：
- clear:left（不允許元素左邊有浮動元素）/right; 應當應用在要去除浮動的元素本身梭纹；也就是躲惰，你要影響哪個元素，就把樣式調用在哪個元素里面变抽；
清楚浮動
方法1：添加額外空標簽
在浮動元素末尾添加一個額外的空標簽础拨，來撐開盒子如下：
CSS:
.clear{clear:both;}
HTML:
<div class="clear"></div>
<br class="clear">
<!-- 利用br標簽自帶的屬性 -->
<br clear="all">
<hr class="clear">
<!-- 同上，利用<hr>標簽 -->
優(yōu)點：簡單易懂绍载，并且代碼量泄钭凇；
缺點：額外添加了大量的無語義的標簽击儡，HTML代碼不夠優(yōu)雅塔沃；
總結：知曉就好，不建議使用阳谍；
方法2：使用父元素overflow:hidden
CSS:
overflow:hidden;
*zoom:1;
給浮動元素的父容器添加overflow:hidden;蛀柴，還要注意，在 IE6 中還需要觸發(fā) hasLayout矫夯，方法：為父元素設置容器寬高或設置zoom:1;
理解：在添加overflow屬性后鸽疾，浮動元素又回到了容器層，把容器高度撐起训貌，達到了清理浮動的效果肮韧。此外還可以讓父元素使用overflow:auto;
優(yōu)點：代碼簡單，方便理解旺订；
缺點：
- 多個嵌套后，firefox某些情況會造成內容全選超燃；IE中
mouseover造成寬度改變時會出現(xiàn)最外層模塊有滾動條等区拳，firefox早期版本會無故產生focus等； - 因為應用了overflow意乓，內容增多時容易造成多余內容被截去樱调，造成下拉菜單會被遮擋约素，擴展性，兼容性不足笆凌；
總結：為了不出奇奇怪怪的問題圣猎，不建議使用；
方法3：讓浮動元素的容器（父元素）也浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動乞而；
缺點：拆了東墻補西墻送悔，這樣會使父元素浮動，影響布局爪模；
總結：不推薦使用欠啤。
方法4：display: table;
給父元素設置display：table
優(yōu)點：代碼量小屋灌；
缺點：改變了盒模型本身洁段，變?yōu)楸砀衲Ｐ脱攘梗纱藭斐梢幌盗懈鄦栴}免绿；
方法5：使用鄰接元素處理
直接在浮動元素后面加上一個帶clear屬性的元素
.news {
background-color: gray;
border: solid1pxblack;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content {
clear: both;
}
<div class="news">
<img src="news-pic.jpg"/>
<p>sometext</p>
<div class="content"></div>
</div>
HTML代碼不夠簡潔，增加了無意義的標簽嘶伟。
方法6：使用CSS3的::after偽元素
:after是CSS新增的偽元素除嘹，代表一個元素之后最為鄰近的元素
具體做法：
1. 給浮動元素的父容器添加class="clearfix"的類写半；
2. 然后在樣式表中聲明clearfix::after的css規(guī)則，實現(xiàn)父容器中浮動元素末尾添加了一個看不見的塊元素來清理浮動（注意：這個新增的元素在文檔流中）憾赁；
3. 為了兼容IE6,7污朽，別忘了加上zoom：1；來觸發(fā)IE的haslayout龙考；
代碼如下：
.news{
background-color: gray;
border: solid 1px black;
}
.news img{
float: left;
}
.news p{
float: right;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*觸發(fā)hasLayout*/
zoom: 1;
}
<div class="news clearfix">
<img src="news-pic.jpg"/>
<p>sometext</p>
</div>
[圖片上傳失敗...(image-4502f-1518933762350)]
目前clearfix的標準寫法：
<!--作者標準寫法-->
.clearfix:after {
content:" ";
display:table;
clear:both;
}
.clearfix {
/*觸發(fā)hasLayout*/
zoom: 1;
<!--老IE需要配合給父級元素加上zoom:1來解決IE6,7適配問題-->
Question
Q1：為什么叫clearfix蟆肆？字面上就是修復（fix）清除浮動（clear），方便理解和隨時調用晦款；
Q2：為什么在父容器上添加clearfix類名炎功？因為我們要在樣失表中添加clearfix::after；
Q3：zoom：1是什么缓溅？這是IE的專屬屬性蛇损，為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;以此觸發(fā)haslayout坛怪，和觸發(fā)BFC一個道理淤齐；
Q4：content里面為什么加上一個點？必須要有內容袜匿，而句點是最小的內容更啄；
Q5：height和visibility是干嘛的？確保這個偽元素在頁面上沒有高度居灯，并且不可見祭务，如果沒有這兩個元素内狗，你就可以看到這個點了；
優(yōu)點：代碼量正常义锥，可復用性強
總結：建議使用偽元素方法
總結
為了清除浮動柳沙，上面列了五種方法，大致分為以下兩類
1. 利用clear屬性拌倍，包括在浮動元素最末尾添加一個d愛clear：both的閉合標簽赂鲤，及利用::after偽元素在元素末尾添加內容為一點句點，且aiy偶clear:both屬性的元素贰拿；
2. 利用BFC蛤袒，通過各種手段，包括浮動父容器膨更，添加overflow妙真，父容器設為inline-block等使得父容器生成BFC，與外界隔離開荚守；
這里提到了BFC珍德，那么BFC是什么呢？
CSS2.1中引入了Block Fomatting Contexts矗漾，即塊級元素格式化上下文的概念锈候，簡單說就是塊級元素的排列規(guī)則；
那么如何觸發(fā)BFC敞贡，如何通過BFC來完成各種布局目的呢泵琳？且看下一篇文章。
