一、塊級元素&行級元素
塊級元素
div{
width: 200px;
height: 200px;
border: 1px solid #000000;
}
特性
1、沒有設定寬高 預設寬度一整行
2、可以設定寬高 所占據空間是一整行
行内元素
span{
width: 200px;
height: 200px;
border: 1px solid #000000;
}
特性
1、預設不可以設定寬高
2、他所占據的空間是内容的大小
3、可以把多個行内元素放在同一行
行内塊元素
button{
width: 100px;
height:100px;
}
特性
1、可以設定寬高
2、它所占據的空間是内容的大小
3、可以把多個行内元素放在同一行
運作效果圖
二、初識浮動
首先為了大家更直覺的了解浮動是什麼，可以先看兩個浮動前後的運作結果的截圖。
（1）未使用浮動的情況
（2）使用浮動的情況
使用浮動後，文字就不會按照順序排在圖檔的下面。在浮動以後 圖檔便脫離了正常的文檔流，但它的内容還是會占據空間，是以文字便在圖檔的右邊
<style>
.imgbox{
height: 100px;
}
.imgbox img{
float: left;
}
</style>
<body>
<div class="imgbox">
<img src="img/02.jpg" alt="" />
我是圖檔 我是 圖檔我是圖檔我 是圖檔我是圖檔 我是圖 片 我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔我是圖檔
</div>
</body>
注意
這裡不要給imgbox設定寬度，否則無法實作浮動
原因：
div是塊級元素 是占一行空間的
圖檔的隻占左邊一些的空間 右邊還是有空間位置的 如果設定了寬度 這一行的空間也就隻有圖檔所占的空間 其他空間就沒有了 是以文字隻能按順序往下排
【這也是部落客自己的經驗教訓哈哈哈哈】
浮動原理以及浮動會造成的問題
浮動
1、會脫離正常文檔流，但沒有完全脫離
2、元素可以占據原本脫離的空間，但内容不會脫離
浮動出現的問題
子元素浮動，父元素高度塌陷！！！
父元素的高度是由子元素撐開的，當子元素浮動，脫離正常文本流時，父元素的高度就沒有了
【三種解決方法】
1、直接給父元素設定高度
2、利用BFC解決 給父元素加overflow：hidden
3、用定位解決。
.bigbox{
width: 300px;
/* 給父元素加強定高度 */
/* height: 300px; */
border: 1px solid #000000;
/* 利用BFC解決 給父元素加overflow：hidden */
overflow: hidden;
}
.box1{
width: 100px;
height:100px;
float: left;
background-color: #FF5053;
}