浮动

浮动

  • 浮动是css中很重要的概念,浮动涉及左浮动、右浮动、清除浮动。
  • 右浮动:float:right; 指一个块元素向右移动,让出自己空间,直到碰到包含自己的父元素的最右边的边框。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="div_css_float.css">
<title>浮动案例</title>
</head>
<body>
<div class="div1" id="special">1div</div>
<div class="div1">2div</div>
<div class="div1">3div</div>
</body>
</html>
body{
	width:500px;
	height:500px;
	padding:0px;
	border:1px solid red;
	margin:0px auto;
}

.div1{
	margin:10px 10px 10px 10px;
	width:150px;
	height:100px;
	border:1px solid blue;
	background-color:pink;
}

#special{
	float:right;
}

在这里插入图片描述

  • 左浮动:float:left; 最前面的块元素向左移动直到碰到包含自己的父元素的最左边的边框,其他块元素向左浮动直到碰到前一个块元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="div_css_float.css">
<title>浮动案例</title>
</head>
<body>
<div class="div1">1div</div>
<div class="div1">2div</div>
<div class="div1">3div</div>
</body>
</html>
body{
	width:600px;
	height:500px;
	padding:0px;
	border:1px solid red;
	margin:0px auto;
}

.div1{
	margin:10px 10px 10px 10px;
	width:150px;
	height:100px;
	border:1px solid blue;
	background-color:pink;
	float:left;
}

在这里插入图片描述

  • 清除浮动:如果不希望别的元素在某个元素的左边或者右边,可以使用清除浮动:clear:right; clear:left; clear:both;。
  • 如果块元素很多,父元素无法容纳水平排列的浮动块元素,那么其他浮动块向下移动,直到有足够的空间。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="div_css_float.css">
<title>浮动案例</title>
</head>
<body>
<div class="div1">1div</div>
<div class="div1">2div</div>
<div class="div1">3div</div>
<div class="div1">1div</div>
<div class="div1">2div</div>
<div class="div1">3div</div>
</body>
</html>

在这里插入图片描述

  • 如果浮动元素的高度不同,那么当它们向下移动时可能被其他浮动元素“卡住”,直到有足够的空间:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="div_css_float.css">
<title>浮动案例</title>
</head>
<body>
<div class="div1">1div</div>
<div class="div1" id="special">2div</div>
<div class="div1">3div</div>
<div class="div1">1div</div>
</body>
</html>
body{
	width:600px;
	height:500px;
	padding:0px;
	border:1px solid red;
	margin:0px auto;
}

.div1{
	margin:10px 10px 10px 10px;
	width:150px;
	height:100px;
	border:1px solid blue;
	background-color:pink;
	float:left;
}

#special{
	height:120px;
}

在这里插入图片描述

特别注意

  • 一个元素右/左浮动:尽可能向右/左移动,直到碰到父元素或者其他浮动元素。
  • 如果使用浮动属性,则该元素是不是块元素,都会按照块元素显示(display:block)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="div_css_float.css">
<title>浮动案例</title>
</head>
<body>
<!--span是行内元素-->
<span class="span1">span1</span>
<span class="span1">span2</span>
<span class="span1">span3</span>
<span class="span1">span4</span>
</body>
</html>
/*无浮动*/
body{
	width:600px;
	height:500px;
	padding:0px;
	border:1px solid red;
	margin:0px auto;
}

.span1{
	margin:10px 10px 10px 10px;
	width:150px;
	height:100px;
	border:1px solid blue;
	background-color:pink;
	
}

在这里插入图片描述

body{
	width:600px;
	height:500px;
	padding:0px;
	border:1px solid red;
	margin:0px auto;
}

.span1{
	margin:10px 10px 10px 10px;
	width:150px;
	height:100px;
	border:1px solid blue;
	background-color:pink;
	float:left; /*浮动,以display:block显示*/
}

在这里插入图片描述

  • 元素向右/左浮动,相当于让出自己的左/右边,其他浮动元素就会在它的左/右边排列。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值