CSS清除浮动的方法

来源：互联网发布：头条新闻软件下载编辑：程序博客网时间：2024/05/21 00:44

(1) clear 其中clear的值有none, both,left,right其中clear=both在网页中中的应用最大

(2) 额外标签法直接上代码了

.main{clear: both;} *****空标签的css属性

</style>

<body>

<div class="main"></div> *******这里就是添加了额外的空标签

</div>

</body>

(3) 父级元素使用overflow的方法：通过设置给父级元素添加overflow:hidden;来实现，但是如果子元素使用了定位布局就很难实现

(4).类名{zoom:1} /*使用在 IE6和IE7 */

(5)邻接元素清除浮动的方法：

给它的相邻的元素设置clear:both;这样也可以达到其中那个清除浮动的结果

(6)使用伪类元素：after

直接上代码了：

css的代码：

#two{
width:95%;
margin: 0 auto;
clear:both;
content: " ";
display:block;
height:0;
}
#left{
width:45%;
height:400px;
float:left;
background-color: pink;
}
#right{
width:40%;
height:400px;
float:right;
background-color: yellow;
}
#three{
width:100%;
height:30px;
margin:0 auto;
background-color: green;
}
#four{
clear:both;
}

其中的html代码：

0 0