浮动属性(float)
float 浮动属性
left 左浮动
right 右浮动
注意:浮动属性,脱离标准文档流,元素一旦浮动,那么就不在页面中占有位置了。
浮动属性目的:为了让块状元素变成一行。
元素一旦浮动,就不是块状元素或者行内元素了。
#浮动属性代码
<!DOCTYPE html>
<html>
<head>
<title>float浮动属性</title>
<meta charset="UTF-8" />
<style>
#one{
width:200px;
height:200px;
background:red;
/*浮动属性-左浮动*/
/*元素一旦浮动,就脱离标准文档流*/
float:left;
}
#two{
width:200px;
height:200px;
background:pink;
float:left;
}
#three{
width:200px;
height:200px;
background:cyan;
/*浮动属性,右浮动*/
float:right;
}
</style>
</head>
<body>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</body>
</html>
#效果如下: