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

宝宝乐园 幼儿手工 育儿

育儿知识 幼儿手工制作 育儿活动 宝宝喂养 妈咪生活

 
 
 

日志

 
 

清楚浮动后容器不撑开的问题  

2011-01-28 10:27:19|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {
background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

<div class="news">
<img src="http://yandanhong.blog.163.com/blog/news-pic.jpg" />
<p>some text</p>
</div>
清除因为浮动,DIV的高度不能自动撑开的问题 -  向左向右 - 微笑的天空

 

不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="http://yandanhong.blog.163.com/blog/news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法,那就是对容器 div 进行浮动:

.news {
background-color: gray;
border: solid 1px black;

float: left;

}

.news img {
float: left;
}

.news p {
float: right;
}

<div class="news">
<img src="http://yandanhong.blog.163.com/blog/news-pic.jpg" />
<p>some text</p>
</div>

这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。

  评论这张
 
阅读(466)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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