关于清除浮动(清楚浮动产生的影响)

P32

从文字围绕浮动框谈起。

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    body{width:800px;}
    #div1{border:1px solid #2591a4;}
    #div2{
        width:50px;
        height:120px;
        background: green;
        border: 1px solid #000;
        float:left;
    }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
        <p id="firstPara">这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段</p><p id="secondPara">这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段。</p>
    </div>
</body>
</html>

代码显示的大致效果如下图：

 

这时，如果想要阻止行框(这里指id="secondPara"的段落)围绕在浮动框的外边，需要对这个框应用clear。clear属性的值可以是left、right、both或none，他表示框的那些边不应该挨着浮动框。为了实现这个效果，在被清理元素的顶空白边上面添加足够的空间，使元素的顶边缘垂直下降到浮动框(#div2)下面。在上述的代码的“style”标签中添加"#secondPara{clear:both;}"；代码实现的效果大致如下：

 

浮动元素脱离为文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素流出了垂直空间。

这是一个有用的布局工具它让周围元素为浮动元素流出空间。这解决了前面看到的绝对定位的问题，也就是垂直高度的改变不影响周围的元素，从而破坏设计。（这是笔者入门阶段一直困惑的问题，为什么position:absolute;定位如此方便而网页中的定位却大多采用文档流定位。因为绝对定位的元素与文档流无关，所以它们不影响普通流中的框。如果扩大绝对定位的框（例如，通过增加字号），周围的框不会重新定位。因此，尺寸的任何改变会导致绝对定位的框产生重叠，从而破坏精心调整的布局）。

阶段二：父级元素不包裹浮动的子元素问题产生及处理。

先插上代码如下

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    #div1{
        width:500px;
        border:1px solid red;
        padding:5px;background:#e8f279; 
    }
    #div2{
        width:100px;
        height:100px;
        background:#47e9a3;
        float:left;
    }
    #div3{
        width:300px;
        height:300px;
        background: #79e1f4;
        float:right;
    }

    </style>
</head>
<body>
    <div id="div1">
　　　　　div1(父级DIV)
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

代码显示的大致效果如下：

从上可看出，虽然div2和div3嵌套在父级div1中，但是父级div1却未能将它们包裹住，这是因为div2和div3采用了浮动，所以它们不在处于文档流中，从而不在父级div1中占据空间。

但是，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。这时，如果视觉上想要父级div1包裹住div2和div3，我们需要在父级div1中的某个地方应用clear。

Unfortunately，我们代码中没有元素可以应用清理，所以我们的思路是添加一个空元素，然后对它进行浮动清理。在div3后添加代码"<div style="clear:both"></div>".

代码显示效果如下：

但是，这样的清理方式在HMTL文档中添加了无意义的标签，这是标准布局不提倡的。

第二种清理浮动影响的方法是给父级div1添加样式“float:left”;显示效果同上。这也会产生我们想要的效果。不行的是，下一个元素会受到这个浮动元素的影响。为了解决这个为题，有些人选择对布局中几乎所有东西进行浮动，然后使用适当的有意义元素（常常是站点的页脚）对这些浮动元素进行清理。这有助于减少不必要的标记。但是浮动会变得复杂，而且一些老式浏览器在处理有许多浮动元素的布局时有困难。因此，许多人喜欢添加少量的额外标记。

应用值为hidden或auto的overflow属性会自动清理包含的任何浮动元素，而不需要添加额外的标记。这个方法并不适合所有情况，因为设置框的overflow属性会影响它的表现。

提倡的解决方法：

使用CSS方法结合:after伪类和内容声明在指定的现有内容的末尾添加新的内容。

.clear:after{content:"";display:block;clear:both;},

完整代码如下:

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    .clear:after{
        content:"";
        display: block;
        clear:both;
    }
    #div1{
        width:500px;
        border:1px solid red;
        padding:5px;background:#e8f279; 
    }
    #div2{
        width:100px;
        height:100px;
        background:#47e9a3;
        float:left;
    }
    #div3{
        width:300px;
        height:300px;
        background: #79e1f4;
        float:right;
    }

    </style>
</head>
<body>
    <div id="div1" class="clear">
        div1(父级DIV)
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

至此，解决了在大多数浏览器中的清楚浮动影响，但是！！！这个方法在噩梦IE6中是无效的~因为IE6中，只能识别锚伪类。解决方案且听下回分解~

 

 

posted on 2013-07-30 13:32  晓梦流光  阅读(340)  评论(0)    收藏  举报

导航