HTML>精通CSS DIV网页样式与布局>理解CSS定位和DIV布局>float属性的自我理解

抱着对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>

当然，提供下载。 /Files/samwu/float属性的自我理解.rar
posted @ 2011-06-29 12:23  草珊瑚  阅读(553)  评论(3)  编辑  收藏  举报