浮動
浮動是css里面布局最多的一個屬性，也是很重要的一個屬性。
float：表示浮動的意思。它有四個值。
- none: 表示不浮動，默認
- left: 表示左浮動
- right：表示右浮動
看一個例子
html結構：
<div class="box1"></div> <div class="box2"></div> <span>路飛學城</span>
css樣式：
.box1{
width: 300px;
height: 300px;
background-color: red;
float:left;
}
.box2{
width: 400px;
height: 400px;
background-color: green;
float:right;
}
span{
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
我們會發現，三個元素並排顯示，.box1和span因為是左浮動，緊挨在一起，這種現象貼邊。.box2盒子因為右浮動，所以緊靠着右邊。
那么浮動如果大家想學好，一定要知道它的四大特性
1.浮動的元素脫標
2.浮動的元素互相貼靠
3.浮動的元素由"子圍"效果
4.收縮的效果
浮動元素脫標
脫標：就是脫離了標准文檔流
看例子
<div class="box1">小紅</div>
<div class="box2">小黃</div>
<span>小馬哥</span>
<span>小馬哥</span>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
}
span{
background-color: green;
float: left;
width: 300px;
height: 50px;
}
效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標簽竟然能夠設置寬高了。
原因1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標准文檔流，其實就是它不在頁面中占位置了，此時瀏覽器認為小黃是標准文檔流中的第一個盒子。所以就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素“飄起來了”，但我不建議大家這樣叫。
原因2：所有的標簽一旦設置浮動，就能夠並排，並且都不區分行內、塊狀元素，都能夠設置寬高
浮動元素互相貼靠
看例子
html結構
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
css樣式
.box1{
width: 100px;
height: 400px;
float: left;
background-color: red;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 300px;
height: 300px;
float: left;
background-color: green;
}
效果發現：
如果父元素有足夠的空間，那么3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
如果沒有足夠的空間，那么就會靠着1哥，如果再沒有足夠的空間靠着1哥，自己往邊靠
浮動元素字圍效果
html結構：
<div>
<img src="./images/企業1.png" alt="">
</div>
<p>
123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛
</p>
css樣式：
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
浮動元素緊湊效果
收縮：一個浮動元素。如果沒有設置width，那么就自動收縮為文字的寬度（這點跟行內元素很像）
html結構：
<div>
alex
</div>
css樣式：
div{
float: left;
background-color: red;
}
大家一定要謹記：關於浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清除浮動，
為什么要清除浮動
在頁面布局的時候，每個結構中的父元素的高度，我們一般不會設置。（為什么？）
大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老板說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那么此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然后修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。
看一個效果：
html效果：
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
css樣式：
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮動 父盒子一般不設置高度*/
/*出現這種問題，我們要清除浮動帶來影響*/
/*height: 300px;*/
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
效果發現：如果不給父盒子一個高度，那么浮動子元素是不會填充父盒子的高度，那么此時.father2的盒子就會跑到第一個位置上，影響頁面布局。
那么我們知道，浮動元素確實能實現我們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面布局極大的錯亂！！！所以我們要清除浮動
還好還好。我們有多種清除浮動的方法，在這里給大家介紹四種：
- 給父盒子設置高度
- clear:both
- 偽元素清除法
- overflow：hidden
給父盒子設置高度
這個方法給大家上個代碼介紹，它的使用不靈活，一般會常用頁面中固定高度的，並且子元素並排顯示的布局。比如：導航欄
clear：both
clear：意思就是清除的意思。
有三個值：
left：當前元素左邊不允許有浮動元素
right：當前元素右邊不允許有浮動元素
both：當前元素左右兩邊不允許有浮動元素
給浮動元素的后面加一個空的div，並且該元素不浮動，然后設置clear：both。
html結構：
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
<!-- 給浮動元素最后面加一個空的div 並且該元素不浮動 ，然后設置clear:both 清除別人對我的浮動影響-->
<!-- 內牆法 -->
<!-- 無緣無故加了div元素 結構冗余 -->
<div class="clear"></div>
</ul>
</div>
<div class="box">
</div>
css樣式
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clear{
clear: both;
}
偽元素清除法(常用)
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然后設置
.clearfix:after{
/*必須要寫這三句話*/
content: '.';
clear: both;
display: block;
}
新浪首頁推薦偽元素清除法的寫法
/*新浪首頁清除浮動偽元素方法*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow:hidden(常用)
overflow屬性規定當內容溢出元素框時發生的事情。
說明：
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
有五個值：
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
逐漸演變成overflow：hidden清除法。
其實它是一個BFC區域: https://blog.csdn.net/riddle1981/article/details/52126522
到此為止。關於浮動的實現並排、清除浮動的四個用法已經介紹完畢，大家一定要熟記於心。