CSS浮動 CSS清除浮動
CSS的浮動
浮動介紹
浮動是網頁佈局中一個非常重要的屬性。起初浮動是為了解決文字環繞的問題，後來被發現可以用來佈局，再後來浮動就忘記了他的本職工作轉而把副業變成了主業。
標準文件流
在標準文件元素預設是從左往右，從上往下排列的。在對頁面元素進行任何處理時元素就會按著標準的文件流進行佈局，也就是我們說的流式佈局。
下面的程式碼就是一個標準的流式佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div 效果圖：
脫標
脫標簡單來說就是脫離標準流，也就是說元素不再按著標準的佈局方式在頁面中顯示；當我們給元素新增浮動有以後，該元素就會脫標，脫標的元素會產生如下現象：
1、浮動的元素互相貼靠
2、浮動的元素會產生”字圍“效果
3、浮動元素有收縮效果
4、浮動元素會浮動在頁面上的頂層(這裡不牽涉到定位的概念)
浮動屬性（float）
給元素新增浮動就是給元素設定float屬性樣式
屬性可選值：
none 元素不浮動（預設）left 規定元素向左浮動
right規定元素向右浮動
下面就用一個例項來展示一下浮動效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div_1{
width: 200px;
height: 200px;
background-color: #FF0000;
}
.div_2{
width: 100px;
height: 100px;
background-color: aqua;
/* 給元素新增浮動 */
float: left;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_2">
</div>
</div>
</body>
</html>
效果圖：
浮動的缺點（他會破壞頁面的整體佈局）
下面就用一個例子說明該問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div_1{
border: 2px solid red;
}
.div_2{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_2"></div>
</div>
</body>
</html>
效果圖：
首先我們寫了一段不給元素新增浮動的程式碼
然後我們給div_2子元素加上浮動再觀察
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div_1{
border: 2px solid red;
}
.div_2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_2"></div>
</div>
</body>
</html>
效果圖：
通過對以上兩個效果的觀察我們不難發現，倆段程式碼我們都沒有給div_1設定高度，在第一個效果裡div_1用於用於塊級元素的特點被子元素div_2撐開，但是當我們給div_2加上浮動以後div_1就失去了高度。原因就是浮動的元素脫離了標準流，導致父盒子高度發生塌陷，這是一個嚴重的問題，他會嚴重破會我們的佈局，導致整個頁面紊亂，所有我們必須去解決這個問題，由此我們便引出了，清除浮動的概念
清除浮動
這裡所說的清除浮動並不是說我們去程式碼裡面將float屬性給刪除掉，而是通過技術手段將浮動所產生的問題給清除掉（在我看來本身這個 清除浮動的名字就叫的有些矛盾），清除浮動的方法有很多不常用在這裡我就是提及一下不做詳細解釋
1、固定父元素的高度，就是給父元素設定height（雖然解決了塌陷問題但是這種方式並不可取，因為在實際開發中我們的高度是隨著內容變化而變化的如果我們將他固定了那就讓網頁失去了靈活性了，也不利於後期的維護）
2、內牆法，聽著挺高階其實就是在元素後面新增一個塊級元素通常是（div）並給元素新增clear:both;屬性，clear就是字面意思清除，both清除浮動元素對左右兩邊的影響，這樣雖然可以很好的解決浮動的破壞性，也沒有太大的副作用，但是當我們的專案大起來的時候就會發現會出現太多的沒有實際意義的空標籤，造成結構冗餘
3、利用偽元素來清除浮動（至於什麼是偽元素這裡不做解釋），其原理就是利用偽元素給浮動元素的父元素的開頭和結尾新增一個塊級元素也是第二種方式，具體的看如下程式碼以便更好的理解：
程式碼理解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div_1{
border: 2px solid red;
}
.div_2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
/**/
.clearfix::after,
.clearfix::before{
/* content是偽元素必須要寫的 */
content: "";
/*我們要新增的是塊級元素*/
display: block;
/*clear：both清除浮動核心上面有解釋*/
clear:both;
/*隱藏我們創建出來的元素，選擇overflow:hidden是因為它不佔位置*/
overflow:hidden;
}
</style>
</head>
<body>
<div class="div_1 clearfix">
<div class="div_2">
</div>
</div>
</body>
</html>
