【教程】html+css零基础入门教程之CSS 浮动（二十四）

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

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动

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

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

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

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

CSS float 属性

float 属性定义元素在哪个方向浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

float属性可选值如下：

left:元素向左浮动

right:元素向右浮动

none:默认值。元素不浮动，并会显示在其在文本中出现的位置

inherit:规定应该从父元素继承 float 属性的值

行框和清理

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

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

要想阻止行框围绕浮动框，需要对该框应用 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: 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 clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明：clear 属性定义了元素的哪边上不允许出现浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

clear属性可选值如下：

left:在左侧不允许浮动元素

right:在右侧不允许浮动元素

both:在左右两侧均不允许浮动元素

none:默认值。允许浮动元素出现在两侧

inherit:规定应该从父元素继承 clear 属性的值

清除浮动的常用方法

.clearfix:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.clearfix{ zoom:1;}.clear { clear:both }

内层div或者其他标签内含有浮动元素, 则可以直接在外层加clearfix样式即可以清除浮动. 这是兼容性最好的一种方法.

实例

利用浮动制作图片横向列表

html代码如下：

<ul class="clearfix con-css" style="margin:0" ><li > <img src="images/hua.png" alt="" /></li><li > <img src="images/hua.png" alt="" /></li><li > <img src="images/hua.png" alt="" /></li><li > <img src="images/hua.png" alt="" /></li></ul>

css代码如下：

.clearfix:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.clearfix{ zoom:1;}.con-css li{float:left;list-style:outside none none;margin:0 1px;height:44px;border:1px solid #333}

页面上的效果：

• 

练习题

1、下列关于float属性的取值说明不正确的是（）

A、取值为left表示浮动到左边

B、取值为right表示浮动到右边

C、取值为none表示元素不浮动

D、取值为inherit表示从父级元素获取float值，这是其默认值

2、这段代码会导致图片和文字如何显示： text <img src="images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/images/1.jpg" style="float:right" /> text（）

A、图片分隔文本

B、图片显示在右边，文本显示在左边

C、图片显示在左边，文本显示在右边

相关文章

【教程】html+css零基础入门教程（一）

【教程】html+css零基础入门教程（二）

【教程】html+css零基础入门教程（三）

【教程】html+css零基础入门教程（四）

【教程】html+css零基础入门教程（五）

【教程】html+css零基础入门教程（六）

【教程】html+css零基础入门教程（七）

【教程】html+css零基础入门教程（八）

【教程】html+css零基础入门教程（九）

【教程】html+css零基础入门教程（十）

【教程】html+css零基础入门教程（十一）

【教程】html+css零基础入门教程（十二）

【教程】html+css零基础入门教程（十三）

【教程】html+css零基础入门教程（十四）

【教程】html+css零基础入门教程之CSS尺寸（十五）

【教程】html+css零基础入门教程之CSS边框（十七）

【教程】html+css零基础入门教程之CSS外边距（十八）

【教程】html+css零基础入门教程之CSS 外边距合并（十九）

【教程】html+css零基础入门教程之CSS 布局（二十）

【教程】html+css零基础入门教程之CSS 定位（二十一）

【教程】html+css零基础入门教程之CSS 相对定位（二十二）

【教程】html+css零基础入门教程之CSS 绝对定位（二十三）