抱着对ASP.NET前台开发的热爱，今天上午特别看了float属性，说实话还挺复杂。
先把我的例子放上来，自我理解都在这个例子里了。还有些不完美之处就是，clear属性没放上来。
<html>
<head><title>float属性的自我理解</title>
<style type="text/css">
.father
{
background-color:#fffea6;
border:1px solid #111111;
padding:25px;
}
.oldbrother
{
padding:10px;
margin:5px;
background-color:#70baff;
border:1px dashed #111111;
float:none;
}
.youngbrother
{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
</style>
<script type="text/javascript" src="JS/jquery-1.4.2-vsdoc.js"></script>
<script type="text/javascript">
$(function() {
$("#nofloat").click(function() {
$(".oldbrother").attr("style", "float:none;");
$(".youngbrother").attr("style", "float:none");
});
$("#leftfloat1").click(function() {
$(".oldbrother").attr("style", "float:left;");
});
$("#rightfloat1").click(function() {
$(".oldbrother").attr("style", "float:right;");
});
$("#nofloat1").click(function() {
$(".oldbrother").attr("style", "float:none;");
});
$("#Fumargin").click(function() {
$(".oldbrother").attr("style", "float:left;margin:5px 0 0 -35px;");
});
$("#leftfloat2").click(function() {
$(".youngbrother").attr("style", "float:left;");
});
$("#rightfloat2").click(function() {
$(".youngbrother").attr("style", "float:right;");
});
});
</script>
</head>
<body>
元素占用的空间有div块级(block)，span行内级(inline)之分。block，占用一行空间，撑满父元素；inline，占用的空间仅仅是自身content+padding+border+margin。<br />
要知道block,inline，都有float属性，即浮动。不设置浮动属性，默认float为none。<br />
哥哥属性设置浮动后，其弟弟元素的内容包围哥哥元素，哥哥元素不再属于父元素。<br />
弟弟元素设置浮动后，对哥哥元素没影响，但同样不属于父元素。<br /><br />
<br />
<div class="father">
<div class="oldbrother">哥哥元素</div>
<div class="youngbrother">弟弟元素</div>
</div>
<div style=" clear:both;">
<input type="button" id="nofloat" value="设置哥哥弟弟元素为无浮动" /><br />
<input type="button" id="nofloat1" value="设置哥哥元素为无浮动" />
<input type="button" id="leftfloat1" value="设置哥哥元素为左浮动" />
<input type="button" id="rightfloat1" value="设置哥哥元素为右浮动" />
<input type="button" id="Fumargin" value="设置哥哥元素的margin属性为负数，左浮动" /><br />
<input type="button" id="leftfloat2" value="设置弟弟元素为左浮动" />
<input type="button" id="rightfloat2" value="设置弟弟元素为右浮动" />
</div>
<div style="float:left">这是block元素。</div>
<div>这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。</div>
<span style="float:left; background-color:Gray;">这是inline元素。</span>
<div style="border:dotted 1px black">这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。</div>
</body>
</html>
<head><title>float属性的自我理解</title>
<style type="text/css">
.father
{
background-color:#fffea6;
border:1px solid #111111;
padding:25px;
}
.oldbrother
{
padding:10px;
margin:5px;
background-color:#70baff;
border:1px dashed #111111;
float:none;
}
.youngbrother
{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
</style>
<script type="text/javascript" src="JS/jquery-1.4.2-vsdoc.js"></script>
<script type="text/javascript">
$(function() {
$("#nofloat").click(function() {
$(".oldbrother").attr("style", "float:none;");
$(".youngbrother").attr("style", "float:none");
});
$("#leftfloat1").click(function() {
$(".oldbrother").attr("style", "float:left;");
});
$("#rightfloat1").click(function() {
$(".oldbrother").attr("style", "float:right;");
});
$("#nofloat1").click(function() {
$(".oldbrother").attr("style", "float:none;");
});
$("#Fumargin").click(function() {
$(".oldbrother").attr("style", "float:left;margin:5px 0 0 -35px;");
});
$("#leftfloat2").click(function() {
$(".youngbrother").attr("style", "float:left;");
});
$("#rightfloat2").click(function() {
$(".youngbrother").attr("style", "float:right;");
});
});
</script>
</head>
<body>
元素占用的空间有div块级(block)，span行内级(inline)之分。block，占用一行空间，撑满父元素；inline，占用的空间仅仅是自身content+padding+border+margin。<br />
要知道block,inline，都有float属性，即浮动。不设置浮动属性，默认float为none。<br />
哥哥属性设置浮动后，其弟弟元素的内容包围哥哥元素，哥哥元素不再属于父元素。<br />
弟弟元素设置浮动后，对哥哥元素没影响，但同样不属于父元素。<br /><br />
<br />
<div class="father">
<div class="oldbrother">哥哥元素</div>
<div class="youngbrother">弟弟元素</div>
</div>
<div style=" clear:both;">
<input type="button" id="nofloat" value="设置哥哥弟弟元素为无浮动" /><br />
<input type="button" id="nofloat1" value="设置哥哥元素为无浮动" />
<input type="button" id="leftfloat1" value="设置哥哥元素为左浮动" />
<input type="button" id="rightfloat1" value="设置哥哥元素为右浮动" />
<input type="button" id="Fumargin" value="设置哥哥元素的margin属性为负数，左浮动" /><br />
<input type="button" id="leftfloat2" value="设置弟弟元素为左浮动" />
<input type="button" id="rightfloat2" value="设置弟弟元素为右浮动" />
</div>
<div style="float:left">这是block元素。</div>
<div>这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。</div>
<span style="float:left; background-color:Gray;">这是inline元素。</span>
<div style="border:dotted 1px black">这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。</div>
</body>
</html>
当然，提供下载。 /Files/samwu/float属性的自我理解.rar