我们可以看到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,相应的浮动对应相应的清除浮动.下面我们来看一个浮动的例子,一共四个块元素,前面两个浮动,后面两个不浮动,结构如下:
查看更多关于CSS-浮动篇float_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did106872