分享

浮动学习笔记

 leong 2012-03-29
clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.news {
  background-color: gray;
  border: solid 1px black;
  float:left;
  width:600px;
  margin:0px auto;
  }
.news img {
  float: left;
  width:50px;
  height:50px;
  }
.news p {
  float: right;
  }

.clear {
  clear: both;
  }    /* 因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:我们可以添加一个空元素并且清理它。这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。*/
</style>
</head>

<body>
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>

</div>


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

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

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

</body>
</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    热点新闻
    类似文章 更多