1.浮動可以解決的問題：
（1）文字包圍圖片的問題。
（2）莫名其妙的間隔問題。
（3）向左向右排版對齊。
1.1文字包圍圖片的問題。
首先看沒有加浮動的效果，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
width: 500px;
}
img{
float:left ;
}
</style>
</head>
<body>
<div id="d1">
<img src="./img/11.jpeg" >
<span>菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！菜逼！！！
</span>
</div>
</body>
</html>
紅色的那一塊文字沒有包圍圖片，越看越彆扭，留着幹啥。
原因：圖片他是行級元素，他佔一整行，所以文字在下面。
解決方法: 使用浮動可以解決這個問題，浮動讓圖片脫離正常的文檔流，又不會讓文字進入圖片裏面去。
只要給圖片加一個css樣式讓他向左浮動，不是讓span向左浮動哦，菜逼就包圍了圖片。
img{
float:left ;
}
1.2 莫名其妙的間隔問題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 600px;
height: 200px;
background-color: skyblue;
}
.child{
display: inline-block;
width: 200px;
height: 200px;
background-color: aqua;
/* div是塊級元素，將他變成行塊，他就能跑到一行去了 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
如圖可見他並沒有塞到一行去，中間有個縫縫。
原因：三行child類代碼換行了產生了空格，在html中兩條語句中不管有多少空格，只能渲染出來一個空格。
第一種解決方法：把語句寫成如下代碼可以解決問題，但是正常的代碼不會這樣寫的。.
<div class="child"></div><div class="child"></div><div class="child"></div>
第二種解決方法：在child類的樣式表中添加float：left；讓他向左浮動。
.child{
display: inline-block;
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
第三種解決辦法：空格也是字體的一種，將font-size：0，也可以解決這個問題，但是不適用，裏面有文字咋辦。
.parent{
width: 600px;
height: 200px;
background-color: skyblue;
font-size: 0;
}
1.3 排版問題
可以設置元素向左向右對齊
向右float：right； 向左float：left
.child{
display: inline-block;
width: 200px;
height: 200px;
background-color: aqua;
float: right;
}
總結：浮動可以設置元素，脫離正常的文檔流，向左或向右，靠近父級元素的邊緣，或者是設置了浮動的其他元素的邊緣靠攏。
2.浮動引發的高度塌的陷解決方法。
浮動引起的高度塌陷的問題，也是面試中常問的。
什麼是高度塌陷 ？
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 900px;
background-color: skyblue;
}
.child{
display: inline-block;
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<h1>菜逼！！！菜逼！！！菜逼！！！菜逼！！！</h1>
</body>
</html>
按道理h1是塊級元素應該在下面。
原因：父元素沒有設置高度，子元素因爲設置了浮動，脫離了文檔流，父元素找不到子元素，所以子元素沒有撐開父元素，h1就跑到上面來了 。
這就是高度塌陷。
多說一句行內元素和塊級元素的區別
行內元素：
- 與其他行內元素並排
- 不能設置寬高，默認的寬度就是文字的寬度
- margin和padding上下無效
塊級元素：
- 霸佔一行，不能與其他任何元素並列。
- 能接受寬高，如果不設置寬度，那麼寬度將默認變爲父級的100%。
解決高度塌陷的方法：
1.設定父元素的高度
在知道父元素高度的情況下，給父元素設置高度。這裏如果父元素給了100px，他還不會擠下去。
2. 在最後新增子元素，設置子元素css樣式清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 900px;
/* height: 200px; */
background-color: skyblue;
}
.child{
display: inline-block;
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="clear"></div>
</div>
<h1>菜逼！！！菜逼！！！菜逼！！！菜逼！！！</h1>
</body>
</html>
3.僞元素清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 900px;
background-color: skyblue;
}
.child{
display: inline-block;
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.clear::after{
clear: both;
display: block;
content: "";
}
/* 方便其他地方需要，因爲塊級元素會使瀏覽器重新計算寬高等。*/
</style>
</head>
<body>
<div class="parent clear">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<h1>菜逼！！！菜逼！！！菜逼！！！菜逼！！！</h1>
</body>
</html>
自己理解的僞類圖
:befor 在元素內部的最前面創建一個假的子元素。
:after 在元素內部的最後面面創建一個假的子元素。
注意來，content必須要寫，沒有內容也要寫成content:"";的樣子。
清除浮動還有其他方法。這裏只寫比較常用的幾個吧。
本人是個菜逼，理解有錯誤的地方，歡迎指正。記錄下學習筆記。