左浮动和右浮动

最新推荐文章于 2023-06-24 14:40:14 发布

gocpplua

最新推荐文章于 2023-06-24 14:40:14 发布

阅读量1.1w

点赞数 4

分类专栏： PHP从入门到精通文章标签：左浮动右浮动清除浮动独立开发者

本文链接：https://blog.csdn.net/chenqiai0/article/details/42834335

版权

PHP从入门到精通专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在div+css中浮动分为左浮动，右浮动，清除浮动

① 右浮动

所谓右浮动，指一个块元素向右移动，让出自己空间，向右移动直到碰到包含自己的父元素的最右边的边框.

② 左浮动

所谓左浮动，指一个块元素向左移动，让出自己空间，向右移动直到碰到包含自己的父元素的最左边的边框.

快速入门 :

理论完了以后直接开门见山来段代码：

float.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="UTF-8"/>
	<title>盒子模型2</title>
	<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
	<div class="div4">
	    <div class="div1">
			div1
		</div>
		<div class="div2">
			div2
		</div>
		<div class="div3">
			div3
		</div>
	</div>
</body>
</html>

div.css

.div1
{
	width: 150px;
	height: 150px;
	border: 1px solid blue;
	background: pink;
}

.div2
{
	width: 400px;
	height: 400px;
	border: 1px solid blue;
}

/* id选择器 */
#special
{
	float: right; /* 右浮动 */
}

从这个案例我们可以看出，所谓左浮动就是指: 某个块元素尽量向左边移动，这样就让出它右面的空间，让别的块元素显示.

浮动的特别说明:

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮

动元素“卡住”：直到有足够空间.

☞ 如果使用浮动属性：则该元素不管是不是块元素，都会按照 display: block来显示.

小总结:

你可以这么理解浮动:如果一个元素右/左浮动则:

①它本身会尽可能向右/左移动，直到碰到边框或者

别的浮动元素,特别强调浮动对块元素和行内元素都

生效!

②元素向右/左浮动，就相当于让出自己的左/右边,别

的元素就会在它的左/右边排列。