一、float作用
HTML代码编写过程中需要注意代码规范,代码错落有致即是其中最基本的要求,但是浏览器会讲换行代码之间的多个空格解释为一个空格,但是这一个空格有时候会破坏整个页面布局,如何解决呢?通过子元素浮动即可解决。
二、float属性值详述
1、none
none:默认值。元素不浮动,并会显示其在文本中出现的位置。
2、left
left:元素向左浮动。
示例代码1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
<style type="text/css">
.out{
width:200px;
border: 1px solid #00ee00;
}
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="background-color: red;"></div>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: yellow;"></div>
</div>
<br/>
<div class="out">
<div class="in" style="background-color: red; float:left;"></div>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: yellow;"></div>
</div>
说明:红框左移,覆盖绿框。
</body>
</html>
结果如图:
示例代码2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
<style type="text/css">
.out{
width:300px;
border: 1px solid #00ee00;
}
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="background-color: red;"></div>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: yellow;"></div>
</div>
<br/>
<div class="out">
<div class="in" style="background-color: red; float:left;"></div>
<div class="in" style="background-color: green; float:left;"></div>
<div class="in" style="background-color: yellow; float:left;"></div>
</div>
说明:子div全部左浮动,父div宽度为0;父div的宽度刚好容得下水平排列的子div。
</body>
</html>
结果如图:
3、right
元素向右浮动
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>right</title>
<style type="text/css">
.out{
width:200px;
border: 1px solid #00ee00;
}
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="background-color: red;"></div>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: yellow;"></div>
</div>
<br/>
<div class="out">
<div class="in" style="background-color: red; float:right;"></div>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: yellow;"></div>
</div>
说明:红向右浮动。
</body>
</html>
结果如图:
4、inherit
规定应该从父元素继承float属性的值。注:IE浏览器不支持inherit属性值
三、注意
1、以往该属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动;
2、浮动元素会生成一个块级框,而不论它本身是何种元素;
3、如果浮动非替换元素,则要指定一个明确的宽度,否则它们会尽可能地窄;
4、假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>没有足够的浮动空间</title>
<style type="text/css">
.out{
width:250px;
border: 1px solid #00ee00;
}
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="background-color: red; float:left;"></div>
<div class="in" style="background-color: green; float:left;"></div>
<div class="in" style="background-color: yellow; float:left;"></div>
</div>
说明:由于父div的宽度不足以容得下三个子div水平排列,那么其它子div浮动块儿将向下移动;
</body>
</html>
结果图如下:
5、可能出现卡主的情况
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>没有足够的浮动空间</title>
<style type="text/css">
.out{
width:200px;
border: 1px solid #00ee00;
}
.in{
width: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="height: 120px; background-color: red;"></div>
<div class="in" style="height: 100px; background-color: green;"></div>
<div class="in" style="height: 100px; background-color: yellow;"></div>
</div>
<br/>
<div class="out">
<div class="in" style="height: 120px; background-color: red; float:left;"></div>
<div class="in" style="height: 100px; background-color: green; float:left;"></div>
<div class="in" style="height: 100px; background-color: yellow; float:left;"></div>
</div>
说明:由于父div的宽度不足以容得下三个子div水平排列并且第一个子div的高度比其它子div的高度高,那么这些高度比较低的子div就有可能被卡住的;
</body>
</html>
结果图如下: