一、浮動元素會產生浮動流
所有產生了浮動流的元素，塊級元素是看不到他們的（也就是說，塊級元會認爲浮動元素所佔的位置是沒有東西的，就會自動覆蓋上去）；而產生了BFC的元素和文本類屬性的元素以及文本都能看到浮動元素；
**也就是說產生浮動的元素對不同的其他元素的影響不同**
解釋一下BFC：
BFC :（Block Formatting Context）
直譯爲“塊級格式化範圍”。它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。當涉及到可視化佈局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這裏有點類似一個BFC就是一個獨立的行政單位的意思。也可以說BFC就是一個作用範圍。可以把它理解成是一個獨立的容器，並且這個容器裏的box的佈局，與這個容器外的毫不相干；
如何觸發一個盒子的BFC（四種方法）:
1、
position:absolute;
2、
display:inline-block;
3、
float:left;
float:right;
4、
overflow:hidden;
爲了解決上述問題（浮動對後繼元素會有影響），有以下兩種方法：
先來看一下過程：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.wrapper{
border: 1px solid #000;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
</html>
如果在父級的最有一個有浮動的子級後面添加一個<p>元素，然後在<p>元素的css內加上clear:"both";屬性的話：
html中添加：
<div class="wrapper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<p class="clear"></p>
</div>style中添加：
.clear{
clear: both;
}
可見，父級在邏輯上被撐開，那麼這個方法在邏輯上是解決了問題的
但是不科學，因爲添加元素改變了原本頁面的結構；
2、利用僞元素來清除浮動
span::before{}span::after{}在此實例中，我們也可以這樣修改css而不用添加<p>元素來清除浮動：
.wrapper::after{
content: "";
clear: both;
display: block;
}
content:"";clear:both;display:block;**補充**
凡是設置了
position:absolute;float:left/right;總結：有意識並且有效的清除浮動，可以爲我們之後的編碼減少很多不必要的問題；