zoukankan      html  css  js  c++  java
  • 浮动的几点

    下面是一些自己理解和网上摘录的:

    1. 浮动的元素会脱离normal(文档流或标准流)。例子:
      View Code
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>New Web Project</title>
              <style type="text/css" >
                  .parent {
                      background: pink;
                      width: 300px;
                      height: 500px;
                  }
                  .div1 {
                      background: red;
                      width: 100px;
                      height: 50px;
                      float: left;
                  }
                  .div2 {
                      background: yellow;
                  }
      
              </style>
          </head>
          <body>
              浮动的元素会脱离normal流(文档流或标准流)。
              <br/>
              所以div2无法识别div1的位置,就出现在首位,结果div1会覆盖div2。
              <br/>
              如果div2长度少于div1长度,就完全被覆盖
              <br/>
              无论div2长度是多少,div2文字都会围绕div1
              <br/>
              <div class="parent">
                  <div class="div1"></div>
                  <div class="div2">
                      我是div2的文字
                  </div>
      
              </div>
          </body>
      </html> 
    2. 当添加一个浮动元素时:首先查看容器的当前行能否容得下这个元素,容不下就换行添加。注意:新浮动元素width>容器width,直接在新行添加,即使会超过容器width
    3. 浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。(部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动)
    4. 浮动元素不会比容器的顶部还高
    5. 后一浮动元素的上界不会超过前一个浮动元素的下界(记住)
    6. 水平方向上,尽可能居左或居右

    参考:

    http://www.75team.com/archives/357?utm_source=rss&utm_medium=rss&utm_campaign=%25e5%25a4%25a7%25e8%25af%259dfloat

    (介绍得比较详细)

  • 相关阅读:
    linux下解压命令大全
    关于伸展树的详细解析(E文)
    数据结构与算法汇总
    Linux下的压缩解压缩命令详解
    Linux Netcat 命令——网络工具中的瑞士军刀
    gethostbyname
    Html 转化为 PDF
    返回一个表
    sqlserver创建函数
    取不同类别的第一条数据
  • 原文地址:https://www.cnblogs.com/dann/p/2733122.html
Copyright © 2011-2022 走看看