zoukankan      html  css  js  c++  java
  • css样式 float的理解

    float w3cSchool里解释说,

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    他不占据文档流空间,因此我试验:
    1、如果两个div,第一个正常,第二个设为浮动,是不是第二个就会覆盖掉第一个,但实际试验情况不是如此,第二个div还是在第一个div的下边显示;
    2、连个div, 第一个设为浮动,第二个正常,显示结果为第一个浮动div覆盖第二个div。
    因此我判断:例1-> 第二个div设为浮动后,确实不占据文档空间,但是引文第一个是普通文档,他占据了文档流空间,浮动元素认为上边的文档流都已占用,因此第二个浮动div要从下边显示。
            例2-> 第一个div设为浮动后,不占据文档空间,所以第二个普通文档会上移到第一个div的下面,因为他不认为上边有元素,所以会自动上移。


    例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
    body { margin:0;}
    #side { float: left;}
    #main { background: #99FFFF; height: 300px; }
    #main1 { background: red; height: 500px; }
    文章出处:标准之路(http://www.aa25.cn)
    </style>
    </head>

    <body>
    <div id="main">你好啊</div>
    <div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>
    <div id="main1">你好啊</div>


    </body>
    </html>

  • 相关阅读:
    CF528D Fuzzy Search
    P3489 付公主的背包
    有标号的DAG计数
    P4609 [FJOI2016]建筑师
    mds/journal.cc: 2929: FAILED assert解决
    Ceph根据Crush位置读取数据
    关于backfill参数建议
    rados put striper功能的调试
    Cephfs的文件存到哪里了
    为什么删除的Ceph对象还能get
  • 原文地址:https://www.cnblogs.com/13188196we/p/3574442.html
Copyright © 2011-2022 走看看