加了浮动之后的元素,会有很多特性:
浮动元素会脱离标准流(简称脱标)浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具有行内块元素的特性
脱标:
脱离标准普通流的控制,移动到指定位置浮动的盒子不再保留原先的位置
示例
例如,下面两个盒子没有加浮动之前,以标准流显示:
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(0, 153, 255);
}
浮动的盒子
标准流的盒子
给第一个盒子加上向左浮动以后:
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(0, 153, 255);
}
浮动的盒子
标准流的盒子