文檔流
? 通常聊到浮動(dòng)都會(huì)說浮動(dòng)元素會(huì)脫離文檔流倡勇，所以我們先了解一下文檔流贡翘。文檔流（normal flow）瀏覽器默認(rèn)在頁面中擺放元素的方式。瀏覽器會(huì)根據(jù)元素在html中的位置從上往下排放元素呈础。此外塊級(jí)元素會(huì)獨(dú)占一行毡惜，行內(nèi)元素會(huì)先從左往右排滿一行再進(jìn)行換行。
float
? float浮動(dòng)屬性瞬铸，可以將指定元素沿容器的左側(cè)或者右側(cè)排列批幌，文本和內(nèi)聯(lián)元素會(huì)圍繞浮動(dòng)元素如下圖（初衷就是利用這個(gè)特征實(shí)現(xiàn)文字圍繞圖片）。塊級(jí)元素不會(huì)感知浮動(dòng)元素的存在（利用float布局的一個(gè)點(diǎn)）嗓节。
float元素的位置：
當(dāng)一個(gè)元素被指定為float時(shí)荧缘，元素會(huì)脫離文檔流往左或者右進(jìn)行平移直到碰到父容器的邊框或者其他浮動(dòng)的元素。
.left{
width:50px;
height:50px;
background:red;
float:left;
}
<div style="width:300px">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat hic odio quisquam quasi at, quia corrupti ut quae, nostrum placeat sed quod architecto nobis dolorem optio. Impedit incidunt illum earum!
<div class="left"></div>
</div>
我們將上面文字減少為lorem后
經(jīng)過上面的觀察可以發(fā)現(xiàn)拦宣，在元素浮動(dòng)時(shí)先將元素轉(zhuǎn)換成行內(nèi)元素截粗，判斷元素所在的行然后進(jìn)行左右平移直到遇到容器的邊框或者其他浮動(dòng)元素停止的位置就是元素浮動(dòng)后的位置信姓。所以利用浮動(dòng)布局時(shí)要注意元素的在html中的先后位置。
行內(nèi)元素的浮動(dòng)
行內(nèi)元素浮動(dòng)將會(huì)獲得塊級(jí)元素的特征绸罗，可以設(shè)置寬高意推、padding（四個(gè)方向）、margin（四個(gè)方向）
.float-span {
width: 48px;
height: 50px;
padding: 10px;
margin: 16px;
float: left;
background-color: skyblue;
}
清除浮動(dòng)
為什么需要清除浮動(dòng)：
由于浮動(dòng)的元素脫離了文檔流珊蟀，浮動(dòng)元素的父容器或者后方的元素不能感知到它的存在導(dǎo)致父容器的高度不能被撐開菊值、后方元素與浮動(dòng)元素重疊等問題。
清除浮動(dòng)的方法：
1育灸、clear屬性
2腻窒、overflow 設(shè)置overflow屬性為非visible的值
利用浮動(dòng)布局
浮動(dòng)在網(wǎng)頁的布局領(lǐng)域廣泛應(yīng)用，下面我們利用浮動(dòng)簡單實(shí)現(xiàn)一個(gè)三列布局磅崭。
例子：布局分為三列儿子，左右兩列固定300px寬，中間一列自適應(yīng)寬度绽诚。
aside{
width:200px;
height:200px;
}
.left{
float:left;
background-color:skyblue;
}
.right{
float:right;
background-color:red;
}
.main{
color:#fff;
margin:0 200px;
background-color:black;
}
<section>
<aside class="left">left aside</aside>
<aside class="right"></aside>
<main class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sint ad laudantium suscipit! Mollitia amet, magnam qui, iusto consequuntur debitis ipsum architecto labore deleniti repudiandae iure tempora repellat. Tempora, eveniet.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda eligendi enim, alias animi quia laudantium pariatur quo officia dolores cum explicabo? Facilis possimus tempore porro hic, recusandae sunt ut. Distinctio?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid perferendis earum illo eveniet corrupti, temporibus eligendi impedit quaerat, saepe cupiditate eaque blanditiis harum! Saepe cumque aut explicabo autem exercitationem iusto?</p>
</main>
</section>
效果：
[圖片上傳中...(1573659583635.png-31d892-1573661937247-0)]
注意點(diǎn)：左右兩列的浮動(dòng)元素在html中要在中間列元素的前面典徊，原因見前面的浮動(dòng)的定位部分。
