CSS之float
2015-11-28 19:05
639 查看
float:
定义：浮动元素会漂浮到其所在行的最左边或者最右边，或者另一个浮动元素的边缘。
浮动最大的作用就是使得文字围绕图片。当一个元素浮动时，它就会脱离标准流，会覆盖非标准流中的元素。
影响：
1. 对其父元素的影响：浮动元素是无法撑开其父元素（非浮动）的，所以浮动元素会溢出到父元素的外部；如果父元素也是浮动元素，则浮动元素可以撑开其父元素。
普通元素是可以撑开其父元素的，父元素会随着子元素的变大而变大。
2. 对其后面兄弟元素的影响：如果兄弟元素（非浮动）是块级元素，则该浮动元素会占据兄弟元素的位置（即覆盖掉兄弟元素），但兄弟元素的内容会环绕浮动元素；
如果兄弟元素不是块级元素，则兄弟元素的内容会环绕浮动元素。
3. 不能影响其前面的非浮动兄弟元素（块级）
由于此时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元素；而背景会被覆盖）。
例如：
这时div2已经被div1覆盖了。
又例如：
这是div2的背景已经被div1覆盖了，但div2中的文字没有被覆盖了。
定义：浮动元素会漂浮到其所在行的最左边或者最右边，或者另一个浮动元素的边缘。
浮动最大的作用就是使得文字围绕图片。当一个元素浮动时，它就会脱离标准流，会覆盖非标准流中的元素。
影响：
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中的文字没有被覆盖了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 