浮动

最新推荐文章于 2024-10-15 22:21:02 发布

傻月菇凉

最新推荐文章于 2024-10-15 22:21:02 发布

阅读量263

点赞数

分类专栏：网页设计之div+css 文章标签：左浮动右浮动

本文链接：https://blog.csdn.net/weixin_40087851/article/details/83586678

版权

网页设计之div+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浮动

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

在这里插入图片描述