浮动 - 源码之家

浮动

浮动是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显示*/
}

元素向右/左浮动，相当于让出自己的左/右边，其他浮动元素就会在它的左/右边排列。

浮动

浮动

特别注意

相关推荐