顾名思义，就是让设置的标签产生浮动效果，就是脱离原来页面的标准输出流。
正常情况下，HTML页面中块元素都是从上倒下排列的。如果想实现左右结构。
float的一种选择（当然还有其他方法）。
比如
<div style="widht:500px">
<div style="float:leftwidth:200px">左</div>
<div style="float:leftwidth:200px">右</div>
</div>
这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白
<div style="widht:500px">
<div style="float:leftwidth:200px">左</div>
<div style="float:rightwidth:200px">右</div>
</div>
以上写法，也是在同一行。不同的是，一个靠左，一个靠右。
这里边的两个DIV的中间有100PX的空白。
需要注意的是，当标签使用了float属性后，就脱离了标准输出流，就不受页面约束了。这样不方便，也不利于页面布局。
所以，一般浮动之后要清除浮动。
<div style="widht:500px">
<div style="float:leftwidth:200px">左</div>
<div style="float:rightwidth:200px">右</div>
<span style="clear:both"></span>
</div>
这样，页面整体的布局结构就基本上没有被破坏了。
这部分只要html+javascript就可以实现 ，给你个小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html>
<head>
<title>test</title>
<script type="text/javascript">
function changeValue()
{
var total = document.getElementById("total")
var first = document.getElementById("first")
var second = document.getElementById("second")
var third = document.getElementById("third")
var totalValue = 0
if (first.value)
totalValue += parseFloat(first.value)
if (second.value)
totalValue += parseFloat(second.value)
if (third.value)
totalValue += parseFloat(third.value)
total.value = totalValue
}
</script>
</head>
<body >
<input id="first" type="text" onchange="changeValue()" />
<input id="second" type="text" onchange="changeValue()" />
<input id="third" type="text" onchange="changeValue()" />
<input id="total" type="text" />
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）