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