CSS-浮动篇float

Float是一个强大的属性,但是它也会困扰我们如果我们不知道它的工作原理的话.这篇文章主要介绍float的原理和基本用法.

我们可以看到float在印刷世界的应用-杂志.很多杂志文章都是左边一个图片,右边的文本浮动环绕着左边的图片.在HTML/CSS的世界中,有浮动样式的图片,文字将会包裹在它的周围,就像杂志的布局一样.图片只是浮动属性众多应用中的一个,我们也可以通过浮动来实现两栏(多栏)布局.实际上,我们可以在任意的HTML元素上使用浮动(块元素).

浮动的定义

来自W3C的定义:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

简单来说就是设置了浮动的元素会浮动到相应的左边或者右边,内容会跟着填充到浮动元素的对应地方.

浮动有四个属性值:left|right|inherit|none,分别是左浮动,右浮动,继承(来自父元素的浮动属性值)和无.

来一个杂志效果的例子:

杂志效果浮动

图片的样式为:

img {
    float: right;
    margin: 10px;
}

浮动的表现

HTML有一个规则:正常文档流.在正常文档流下,每个块元素(div,p,h1...)都会换行.而浮动的元素在正常文档流下是最先布局的,然后脱离正常的文档流显示在它父元素的左边或者右边.所以浮动元素不再换行而是显示在元素的旁边.

看一个例子:没有设置浮动的三个块

块元素的样式:

.block {
    width: 200px;
    height: 200px;
}

这三个块是在正常文档流下的显示,每个元素在上个元素的正下方,现在我们把三个块都设置左浮动:

.block {
    float: left;
    width: 200px;
    height: 200px;
}

效果看这里:左浮动

浮动之后每个块元素都跟在浮动元素的后面.如果父元素没有足够的宽度,那么浮动的元素将会自动换行显示.看这个例子,然后试着缩小浏览器窗口,浮动的块元素会自动换行.

清除浮动

浮动元素脱离了正常的文档流,所以会对在浮动之后的文档结构产生影响,因此我们在浮动元素过后,也要相应的清除浮动,让文档结构恢复到正常的文档流.清除浮动的方法有很多中,首先 最基本的就是对应的clear属性.

clear的属性值:left|right|both|inherit|none,相应的浮动对应相应的清除浮动.下面我们来看一个浮动的例子,一共四个块元素,前面两个浮动,后面两个不浮动,结构如下:

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>

.block {
    width: 200px;
    height: 200px;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

结果看这里

咦,绿色的块去哪里了呢?然后看看源代码,选中绿色块的HTML,原来在粉红色块的正下方.两个浮动元素的显示正如我们期望的那样,左浮动并在一排显示,但是它们已经脱离了正常的文档流,好像它们并不在那里一样.所以第一个没有浮动的元素就占领了它们的位置,被浮动元素遮盖住.所以我们需要清除浮动,让绿色的块显示.

代码结构如下:

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green clear"></div>
<div class="block orange"></div>

.block {
    width: 200px;
    height: 200px;
}
.float { float: left; }
.clear { clear: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

通过clear:left这个css样式,绿色的块显示了,正确的清除浮动能让元素在浮动的基础上也不影响正常的文档流.清除浮动后的效果

利用浮动属性进行布局

在用DIV布局的现在,DIV+float是我们大部分都喜欢用来实现分栏布局的一种方法.我们来看一个简单的两栏布局.

CSS如下:

#container {
    width: 960px;
    margin: 0 auto;
}
#content {
    float: left;
    width: 660px;
    background: #fff;
}
#navigation {
    float: right;
    width: 300px;
    background: #eee;
}
#footer {
    clear: both;
    background: #aaa;
    padding: 10px;
}

通过设置#content左浮动,#navigation右浮动,总宽度为#container来实现了两栏布局.要注意的是,#footer一定要清除浮动,因为同时存在左浮动和右浮动,所以使用clear:both来清楚两边的浮动.

来看一下如果没有对#footer进行清除浮动的结果.戳这里

浮动优先

浮动元素在HTML中放置在不同的位置也会产生不用的显示结果.我们来看一个例子.戳这里

例子中图片向右浮动并且在HTML结构中在未浮动元素P之前.代码结构如下:

<div id="container">
    <img src="data:image.gif" />
    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
</div>

#container {
    width: 280px;
    margin: 0 auto;
    padding: 10px;
    background: #aaa;
    border: 1px solid #999;
}
img {
    float: right;
}

现在我们改变HTML的结构,把浮动元素IMG放在P元素的后面.

<div id="container">
    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
    <img src="data:image.gif" />
</div>

具体效果戳这里

图片这时已经没有包含在#container里,因为浮动优先原则里,之前的例子都是浮动元素在未浮动元素之前,所以得到的结果都是在我们的预期之内,而现在我们没有按照这个规则写我们的HTML结构,所以图片溢出在了包含它的父元素之外,这是由于collapsing.

当一个父元素包含了一些浮动元素,而这些浮动元素并没有向它应该的方式围绕在未浮动元素周围时collapsing就出现了.正如上面的例子中,浮动元素IMG就像并不在#container中一样.

一个最常见去修复这个问题的方式就是在我们的浮动元素后面添加一个有清除浮动属性的元素,跟我们之前清除浮动的方式很像,只是新增了一个额外的元素,代码看下面:

<div id="container">
    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
    <img src="data:image.gif" />
    <div style="clear: right;"></div>
</div>

但是新增了一行额外的代码并不是一个很好的方法,下面我们有几个其他的方法.

现在有一个HMTL,一个父元素有三个浮动的图片,代码结构如下:

<div id="container">
    <img src="data:image.gif" />
    <img src="data:image.gif" />
    <img src="data:image.gif" />
</div>

#container {
    width: 260px;
    margin: 0 auto;
    padding: 10px 0 10px 10px;
    background: #aaa;
    border: 1px solid #999;
}
img {
    float: left;
    margin: 0 5px 0 0;
}

我们可以很快的意识到父元素并没有包含浮动的图片,因为浮动元素并不在文档流中,所以对于父元素来说它是空的,结果看这里

现在我们用CSS来修复这个问题而不是添加额外的HTML标记.有一个方法能让父元素自己清除它包含的浮动元素的浮动-overflow:hidden.要注意的是overflow属性并不是为清除浮动而设计的,它可以隐藏内容和滚动条.现在我们在#container上使用这个属性.

#container {
    overflow: hidden;
    width: 260px;
    margin: 0 auto;
    padding: 10px 0 10px 10px;
    background: #aaa;
    border: 1px solid #999;
}

显示结果戳这里

还有清除浮动的方法就是使用伪类选择器:

#container:after {
    content: ".";
    display: block;
    height:;
    clear: both;
    visibility: hidden;
}

总结:

浮动可以让你的布局变得随意和响应式,同时清除浮动的方式也有很多种,选择你最习惯和喜欢的方式,让布局变得更加优美.