三种清理浮动的方式

在页面布局时，我们常常会遇到这样一个问题：对子元素采用浮动之后两者会脱离文档流,导致父元素因为没有内容而收缩，隐藏掉我们设置的背景和其他相关样式。这个时候，我们为了清除浮动的影响，一般有以下三种方法：

方法一：添加一个进行清理的元素（例如一个段落标签或换行标签），r然后用clear属性进行清理。

<!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=utf-8" />
<title>三种清理浮动的方法</title>
<style type="text/css">
    #main{background-color: #CCC}
    #div1{
        width:30%;
        float: left;
        background-color: blue;
    }
    #div2{
        width: 65%;
        margin-left: 20px;
        float: right;
        background-color: red;
    }
    p{
        clear: both;
    }
</style>
</head>
<body>
<div id="main">
    <div id="div1">
        <p>div1</p>
    </div>
    <div id="div2">
        <p>div2</p>
    </div>
    <p>增加p标签</p>
</div>
</body>
</html>

 

但是这种方法很显然会在页面中增加不必要的标记，一般不使用；

方法二：让父元素进行浮动

#main{
     float:left;
}

但是此时，我们后续的内容往往会全部被父元素影响，无法换行，这个时候我们使用某个元素（例如站点页脚）进行清理以便换行。这样当然不会增加多余的标签，但是会使样式表显得凌乱，所以我们更倾向于第三种方法：

方法三：使用overflow:hedden技术，这种方法为大多数人所接受。例如上例中我们在#main下面加上一句： overflow:hidden; 就可以轻松实现我们需要的效果。

自己尝试一下，才可以知道其中道理哦~~

posted @ 2014-11-25 07:44  我之空间  阅读(159)  评论(0)  编辑  收藏  举报