css浮动布局

浮动布局

float

使用浮动可以控制相邻元素间的排列关系。

float: left;  /* 向左浮动 */
float: right; /* 向右浮动 */
float: none;  /* 不浮动 */

文档流

没有设置浮动的块元素是独占一行的。

浮动是对后面元素的影响，第二个元素设置浮动对第一个元素没有影响。

表示第一个元素div.first-of-type
表示最后一个元素div.last-of-type

div.first-of-type{
   
	border:2px solid red;
}
div.last-of-type{
   
	float: left;
	background: green;
}

丢失空间

如果只给第一个元素设置浮动，第二个元素不设置，后面的元素会占用第一个元素空间。

div