注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

各种清浮动方法小结  

2014-06-27 15:22:36|  分类: CSS小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
清浮动的方法有很多,在这里我来总结几个常用的清浮动方法。

1.clear清浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 200px;
background: #000;
}

.box2{
float: left;

clear:left;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
</body>
</html>

这里我们为box2设置了clear:left;属性清除了box1的浮动。

2.为浮动元素后添加空div标签clear:both;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 200px;
background: #000;
}

.box2{
float: left;
width: 200px;
height: 200px;
background: red;
}

.clear{
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
</style>
</head>
<body>
<div class="box1">

</div>
<div class="clear">

</div>
<div class="box2">

</div>
</body>
</html>

在两个浮动的div之间插入一个清浮动的clear div。(不推荐这样使用,它会增加冗余代码)

3.overflow清浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 200px;
background: #000;
}

.box2{
float: left;
width: 200px;
height: 200px;
background: red;
}

.box3{
height: 200px;
background: yellow;
}

.main{
overflow: hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">

</div>
<div class="box2">

</div>
</div>
<div class="box3"></div>
</body>
</html>

我们为box1,box2的父元素设置overflow:hidden;后同样能达到清浮动的效果。

4.为父级元素定义高度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 200px;
background: #000;
}

.box2{
float: left;
width: 200px;
height: 200px;
background: red;
}

.box3{
width: 500px;
height: 200px;
background: yellow;
}

.main{
height: 200px;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">

</div>
<div class="box2">

</div>
</div>
<div class="box3"></div>
</body>
</html>

当我们使用浮动后,浮动元素的父级元素无法自动获取高度。咱们为其手动设置高度后就可解决问题。

5.after伪类清浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 200px;
background: #000;
}

.box2{
float: left;
width: 200px;
height: 200px;
background: red;
}

.box3{
width: 500px;
height: 200px;
background: yellow;
}

/**对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的内容为空的块来为目标元素清除浮动。*/
.clear:after {
visibility: hidden;/* 将在对象后增加的内容隐藏,但保留物理空间(因为高度设为0,所以对页面无影响)*/
display: block;/* 以块显示(换行作用) */
font-size: 0;/* 字号设置为0,使其内容不对页面产生影响 */
content: ". "; /* " "内为在对象后显示的内容,此处为"." */
clear: both;/* 清除浮动 */
height: 0;/* 高度设为0,使其不对页面产生影响 */
}
.clear{zoom:1;}/*兼容IE6/IE7*/
</style>
</head>
<body>
<div class="main clear">
<div class="box1">

</div>
<div class="box2">

</div>
</div>
<div class="box3"></div>
</body>
</html>

位浮动元素的父元素添加clear 类即可达到清除浮动的目的。做个简单的说明:首先用content属性插入了一个句点,默认情况下content属性插入的内容是行内元素,需要将其display: block,这样才能使 clear: both生效。为了不让插入的内容影响到原来的布局,需要通过 height: 0将其高度设为0,但高度设为0之后,插入的句点还是可见的,所以还需要设置其可见性visibility: hidden。

欢迎大家交流指正~ 淡淡De影痕
  评论这张
 
阅读(162)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018