一、塊級元素&行級元素
塊級元素
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;
}