CSS，浮動及其影響
浮動(float)：
讓預設文件流(標準文件流)下的元素漂浮起來，水平排列。
通俗點來說，浮動可以讓元素浮到第二層，而其他沒有浮動的元素就往上排，而我們是俯視去看的，所以往上頂的那個元素就會被遮住，這就帶來了問題。解決方法，後面會有說。
float: 1. left----左浮
2. right------右浮
3. none ------不浮動
預設(標準)文件流：
說白了就是一個“預設”狀態。文件流指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。
浮動帶來的影響：
1. 行內元素在浮動之後，可以支援寬高。
p{
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
2. 文字會給浮動的元素讓位，可以製作成文字環繞的效果。
p{
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
<body>
<p></p>這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落這是段落
</body>
3. 在沒有給父級高度的情況下，子級浮動後，父級會沒有高度。
這是沒有給子級設定浮動的情況下：
div{
background-color: #f00;
}
p{
/*float: left;*/
width: 50px;
height: 50px;
border: 1px solid #000;
}
<div>
<p></p>
</div>
給子級設定浮動後：
div{ background-color: #f00; } p{ float: left; width: 50px; height: 50px; border: 1px solid #000; } <div> <p></p> </div>
這裡給出的解決方案主要是針對第三種的。
解決方法主要有幾個，下面我就向大家一一介紹：
1. 在父級內容最後新增一個空的div，新增clear屬性
clear-----left------清除左浮動
right------清除右浮動
both-----清除所有浮動
這個方法不推薦使用，因為他會新增大量的無用的標籤，讓頁面的佈局變的更加的複雜。
2. 給父級設定 overflow:hidden；
溢位隱藏，會觸發bfc(block formatting context)塊級格式化上下文
這個也不推薦使用，在和定位一起使用的時候，會產生其他的問題。
3. 使用偽元素 :after (推薦使用)
.clear:after{
content: ""; /*內容為空*/
height: 0;
line-height: 0;
display: block; /*塊級元素*/
visibility: hidden; /*隱藏*/
clear: both; /*清除浮動*/
}
.clearfix{ /*相容性問題*/
zoom: 1; /*ie678*/
}
4. 使用偽類元素(第三種的改進) 缺點，相比於第三種，有點不嚴謹
.clear:after,.clear:before{
content: ""; /*內容為空*/
display: block; /*塊級元素*/
clear: both; /*清除浮動*/
}
.clearfix{ /*相容性問題*/
zoom: 1; /*ie678*/
}