现在的位置: 首页 > 综合 > 正文

关于float的一些感悟

2014年01月12日 ⁄ 综合 ⁄ 共 956字 ⁄ 字号 评论关闭

一个div(div0)内有2个div(div1和div2),div1居左,div2居右,但是会浮出div0,怎么让不浮出呢,可以使用clearall样式,也可以设置div0的样式overflow:hidden;也可以在标签div0里最下面加个<div  style="height:0; line-height:0; font-size:0; overflow: hidden; clear:both;"></div> 如下:

预览如下:

html代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title><%-- overflow:hidden;--%>
    <style type="text/css">
        .clearall {
    zoom:1;
}
.clearall:after {
    content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
.clearfix {
    *zoom:1;
}
.clearfix:after {
    content:'\0020';
    display:block;
    height:0;
    clear:both;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="clearall" style="width:800px; height:auto; margin:0 auto; border:solid 10px #DDDDDD; background-color:Red; ">
         <div style=" width:100px; height:100px; background-color:Aqua; float:left;"></div>
         <div   style=" width:100px;height:100px; background-color:Black; float:right;"></div>
    </div>
    </form>
</body>
</html>

抱歉!评论已关闭.