您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第十五课 如何实现CSS浮动

 skeeter | Div+css教程 | 2010-3-28 | 258点击 | 0评论

这一课,我们将学习如何实现CSS浮动,CSS浮动主要是通过CSS的float属性来实现,而清除CSS浮动则可以通过css的clear属性,这一课我们我们也将有CSS的float属性和clear属性的详细讲解

在CSS布局、排版中，90%人都使用浮动进行排版，所以，此课极为重要，请务必理解！


浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止。


--------------------------------------------------------------------------------


CSS 浮动原理


请看下图，左图为普通的文档流，当把框 1 向右浮动时（right），它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
CSS浮动,CSS float属性,CSS clear属性


再请看下图，当框 1 向左浮动时（left），它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左浮动（left），那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框：
CSS浮动,CSS float属性,CSS clear属性


如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
CSS浮动,CSS float属性,CSS clear属性


--------------------------------------------------------------------------------


CSS float 属性

在 CSS 中，我们通过 float 属性 实现元素的浮动。


float属性的值有3个

1.  left : 左浮动

2.  right : 右浮动

3.  none : 默认（无浮动）


--------------------------------------------------------------------------------


行框和清理

浮动属性还可以制作文本围绕图像的效果。


浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框：
CSS浮动,CSS float属性,CSS clear属性


要想阻止行框围绕浮动框，需要对该框应用 clear属性。


clear 属性有4个值：
1.  left : 清除左浮动

2.  right : 清除右浮动

3.  both : 清除左右浮动

4.  none : 不清除任何浮动


为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
CSS浮动,CSS float属性,CSS clear属性


这是一个有用的工具，它让周围的元素为浮动元素留出空间。


让我们更详细地看看浮动和清理。

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：


.news {

  background-color: gray;

  border: solid 1px black;

  }

 

.news img {

  float: left;

  }

 

.news p {

  float: right;

  }

 

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>


这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。


提示：所有元素一旦定义了浮动属性即自动转换成了块级元素。

注意：在实际操作中除了<img>标签（因其具有隐含的宽度）之外的所有标签设定浮动时务必要为元素设定宽度，否则你会有会想不到的麻烦，并且很难找出。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear属性：
CSS浮动,CSS float属性,CSS clear属性

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

.news {

  background-color: gray;

  border: solid 1px black;

  }

 

.news img {

  float: left;

  }

 

.news p {

  float: right;

  }

 

.clear {

  clear: both;

  }

 

<div class="news">

<img src="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="news-pic.jpg" />

<p>some text</p>

</div>


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

关键字:如何实现CSS浮动,CSS浮动,CSS float属性,CSS clear属性,div+css入门教程

上一篇:第十四课 如何进行CSS定位下一篇:第十六课 什么是CSS 伪类,CSS 伪类是什么

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 26次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 52次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 72次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 60次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net