CSS之float

float:

定义:浮动元素会漂浮到其所在行的最左边或者最右边,或者另一个浮动元素的边缘。

浮动最大的作用就是使得文字围绕图片。当一个元素浮动时,它就会脱离标准流,会覆盖非标准流中的元素。

影响:

1.       对其父元素的影响:浮动元素是无法撑开其父元素(非浮动)的,所以浮动元素会溢出到父元素的外部;如果父元素也是浮动元素,则浮动元素可以撑开其父元素。

普通元素是可以撑开其父元素的,父元素会随着子元素的变大而变大。

2.       对其后面兄弟元素的影响:如果兄弟元素(非浮动)是块级元素,则该浮动元素会占据兄弟元素的位置(即覆盖掉兄弟元素),但兄弟元素的内容会环绕浮动元素;

如果兄弟元素不是块级元素,则兄弟元素的内容会环绕浮动元素。

3.       不能影响其前面的非浮动兄弟元素(块级)

 

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div
	{
		width: 80px;
		height: 80px;
		background-color: yellow;
	}
	</style>
</head>
<body>
hello world
<div></div>
</body>
</html>

由于此时hello world并不是块级元素,所以其本该与div一行,但由于div是块级元素,所以div被移到了下一行。但是,当div加上float:left时,它就会移到hello world的左边,因为float元素会移到其所在行的最左边。



这时如果我们把hello world换成<p>hello world</p>,由于p也是块级元素,所以p和div就不在同一行了,所以即使div加上float:left,它也是在p的下一行的左边。


由于浏览器的渲染是按元素的出现顺序来渲染的,所以对于在float元素之前的非float元素(且与float元素不在同一行),由于在float元素出现之前这些元素已经出现了,所以float元素只能跟在他们的下一行,而不能覆盖他们。对于在float元素之后的非float元素,它们是可能会被float元素覆盖的(但内容如文字之类不会被覆盖,会围绕float元素;而背景会被覆盖)。

例如:

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div#div1
	{
		width: 80px;
		height: 80px;
		background-color: yellow;
		float: left;
	}
	div#div2
	{
		width: 100px;
		height: 80px;
		background-color: green;
	}
	</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>


这时div2已经被div1覆盖了。

又例如:

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div#div1
	{
		width: 80px;  //换成了80px;
		height: 80px;  
		background-color: yellow;
		float: left;
	}
	div#div2
	{
		width: 80px;
		height: 80px;
		background-color: green;
	}
	</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">hello world</div>
</body>
</html>


这是div2的背景已经被div1覆盖了,但div2中的文字没有被覆盖了。


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值