1.浮动简介
浮动(float)
浮动是一种布局手段,会使元素脱离文档流
元素在文档流的时候,会分块元素,行内元素,行内块元素,各自都有一定的特点
设置元素浮动,可以用float样式
可选值:
none 默认值,不浮动
left 向左浮动
right 向右浮动
设置浮动后的一些特点:(第一类特点)
1、设置元素浮动后,元素会脱离文档流,就不会再占据原来在文档流的位置
浮动元素后面的元素就向上
2、设置元素浮动后,元素会尽可能向左或者向右浮动
浮动元素不会超过它前一个兄弟,最多一边齐
3、如果浮动元素前一个兄弟没有浮动,浮动的元素不会跑上去
4、浮动的元素不会超出父元素
#box {
width: 500px;
height: 600px;
background-color: #ccc;
margin: 50px auto;
}
.box{
width: 100px;
height: 100px;
background-color: red;
/* display: inline-block; */
/* float: left; */
}
.box1{
b