CSS中float属性详解

原创 2015年11月17日 19:38:42

首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术。.在HTML中的所有对象,默认分为两种:块元素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素。

其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
 

\

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

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

\

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

\
  

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

行框和清理

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

 \

要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

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

\

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

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

.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 不占据空间。

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

      \

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

.news { background-color: gray; border: solid 1px black; }.news img { float: right; }.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: right; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

详解CSS float属性

转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08   |   In CSS  ...
  • helllochun
  • helllochun
  • 2016年06月08日 19:42
  • 2494

详解CSS float属性

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态。本文将从最基本的知识开始说起,谈谈关于浮动的...
  • wx11055
  • wx11055
  • 2016年01月03日 21:28
  • 209

float属性与clear属性综合讲解与实例

float属性与clear属性综合讲解与实例 一、float属性 对于float属性,要考虑两种布局情况, 1)父元素内容和本元素交错的布局 即父元素包含文本和子元素。该种情况还好理解,就是简...
  • garden55
  • garden55
  • 2016年06月27日 17:21
  • 620

CSS之使用float及position属性实现页面轻松布局

在css的学习过程中,相信有不少盆友会有跟我一样的疑问:就是在使用float属性来进行页面布局时div层会出现消失的情况,接下来我将会在此博文中简单分享一下我对float的理解使用,并使用positi...
  • qiuruolin
  • qiuruolin
  • 2017年04月24日 23:55
  • 246

css使用float属性互相重叠问题

存在问题html,会出现div重叠,内容不重叠现象 DIVCSS5实例 DIV与DIV覆盖 .boxa,.boxb{ margin:0 auto; width:400px;} .boxa-l{...
  • sunzhandong521
  • sunzhandong521
  • 2015年10月22日 19:44
  • 2054

关于CSS浮动float属性的了解及清除浮动的方式

声明:本文主要对一些文章关于float介绍自己的理解和整理,方便日后深入研究和使用,同时提供原文链接。 正文:1、浮动的本质: 挥刀自宫,破坏inline-box行内框元素特质(即破坏了...
  • javaloveiphone
  • javaloveiphone
  • 2016年03月16日 16:10
  • 904

css总结:HTML中用position进行相对定位时与float属性连用容易产生的误区

最近写静态网时将position与float属性连用,结果发现没有达到预期的效果(预期的设想是两个块彼此相连,而结果却是相互重叠了) 本人健忘,故将此记录下来,以下是我从中获取经验。 首先来看一个图示...
  • YaoDeBiAn
  • YaoDeBiAn
  • 2017年02月28日 20:30
  • 878

CSS中的Position、Float属性详解

对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性...
  • andybbc
  • andybbc
  • 2016年01月27日 10:36
  • 254

CSS浮动属性Float详解

CSS浮动属性Float详解 什么是CSS Float? float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CS...
  • zhongqing_fzq
  • zhongqing_fzq
  • 2016年05月19日 15:21
  • 97

CSS浮动属性Float详解

CSS浮动属性Float详解 原文地址:冰羽博客 什么是CSS Float? float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在...
  • randomnet
  • randomnet
  • 2014年10月20日 18:51
  • 606
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中float属性详解
举报原因:
原因补充:

(最多只允许输入30个字)