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="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="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="image.gif" />
    <div style="clear: right;"></div>
</div>

可是新增了一行额外的代码并非一个很好的方法,下面咱们有几个其余的方法.

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

<div id="container">
    <img src="image.gif" />
    <img src="image.gif" />
    <img src="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: 0;
    clear: both;
    visibility: hidden;
}

总结:

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