CSS之float

来源：互联网发布：淘宝客api接口教程编辑：程序博客网时间：2024/05/21 11:37

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元素；而背景会被覆盖）。

例如：

<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 0