首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术,在HTML中的所有对象,默认分为两种:块元素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。
其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧,关于float属性的详细说明可以参考这里。
需要引起你重视的是,float属性不是你所想象的那么简单,不是通过这一篇文字的说明,就能让你完全搞明白它的工作原理的,我们需要在实践中不断的总结经验,应对所出现的问题。我们通过下面的这个小例子,来说明它的基本工作情况。
我们看下面的CSS代码:
Example Source Code
[www.52css.com]
.left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
}
left和right为不作任何浮动的类。leftfloat向左浮动的类。
我们再看看xhtml代码:
Example Source Code
[www.52css.com]
<div class="left">div left float:none</div>
<div class="right">div right [www.52css.ocm]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.52css.ocm]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>
我们看运行效果:
Source Code to Run
[www.52css.com]
[ 可先修改部分代码 再运行查看效果 ]
我们看(1)和(2):容器(1)没有任何浮动,占据了一整行,将(2)挤到了下面一行。而且(2)也占据了一整行的位置。
我们看(3)和(4):容器(3)声明了左浮动,容器(4)浮动到了它的右侧。实现了这两个容器处于同一行的情况。
我们看(5)和(6):容器(5)和(6)是span元素,也就是内联元素(inline element),自然的处于同一行。
分享到:
相关推荐
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...
Css的float浮动属性,用于设置标签对象(如:标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动靠左(float:left)和浮动靠右(float:right)。 float的作用:通过css定义float...
如何正确的理解CSS的float浮动属性.pdf
float浮动属性是CSS布局中非常关键的属性,通过对浮动float属性的理解和掌握,我们可以更好地实现网页的布局和排版。但是,我们也需要注意浮动float属性的缺点,例如浮动未清除的现象和浏览器兼容性问题。
本文将深入探讨CSS中的浮动属性,特别是`float`属性。 `float`属性允许我们将元素(如`div`)设置为在页面上左右浮动,从而改变它们的原始位置。当`float`属性不设为`none`时,元素会被视为块级元素(block-level)...
CSS深入理解之float浮动视频教程.txt 前端必备技能,助你快速掌握
标题中的“CSS布局详解浮动属性Float”指的是CSS布局中的一项重要技术——浮动(Float),它在网页设计中扮演着关键角色。描述虽然未提供具体内容,但可以推测文章将深入探讨浮动属性及其在创建网页布局中的应用。 ...
CSS浮动属性Float详解 CSS浮动属性Float是CSS中的一种定位方式,它可以使元素在网页流中浮动,周围的元素可以围绕它排列。浮动元素仍然是网页流的一部分,这与使用绝对定位的页面元素不同。绝对定位的页面元素被从...
【CSS浮动(float属性)详解】 一、浮动的概念 浮动(float)是CSS布局中的一个重要概念,它使得元素能够脱离正常文档流,向左或向右...正确理解和使用浮动,以及掌握解决浮动问题的策略,是每个前端开发者必备的技能。
- 当内联元素与浮动元素相邻时,由于内联元素的特性,可能会导致布局混乱,因此通常建议将浮动属性应用于块级元素。 - 清除浮动(clear)是与浮动布局相关的另一个重要概念,它用于防止元素受到前面浮动元素的影响。...
标题中的“CSS布局详解浮动属性Float”指的是CSS布局中的一种重要技术——浮动(Float),这个属性主要用于创建复杂的网页布局,尤其是图文混排和多列布局。描述中提到的内容可能是关于浮动属性的历史来源,以及它...
我并没有对CSS所有的属性都有很清晰的情感化的理解,我用CSS才几年啊,我要学的还有很多。但是,对于CSS中常用的float属性,我还是有些感觉的,这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS ...
在网页设计中,浮动属性`float`是CSS(层叠样式表)中一个非常重要的概念,主要用于布局控制。本笔记将深入探讨`float`的原理、应用及其源代码实例。 一、`float`属性概述 `float`属性最初被引入用于创建图文混排的...
具体详细的阐述了css浮动如何解决和浮动产生的原因。
在实际开发中,理解并熟练运用CSS的`float`属性是构建响应式和自适应网页设计的关键技能之一。同时,掌握如何正确管理和清除浮动对于保持页面布局的稳定性至关重要。通过阅读压缩包内的CHM文档,开发者可以深入学习`...