浮动的几点

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

  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

(介绍得比较详细)

你可能感兴趣的:(浮动)