CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
.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;
}
-->
</style>
</head>
<body>
<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>
</body>
</html>
运行上面代码可以发现：
我们看(1)和(2)：容器(1)没有任何浮动，占据了一整行，将(2)挤到了下面一行。而且(2)也占据了一整行的位置。
我们看(3)和(4)：容器(3)声明了左浮动，容器(4)浮动到了它的右侧。实现了这两个容器处于同一行的情况。
我们看(5)和(6)：容器(5)和(6)是span元素，也就是内联元素(inline element)，自然的处于同一行。
分享到：
相关推荐
在前端开发领域，"float-label-css" 是一个利用纯CSS实现的浮动标签输入框样式项目。这个项目的主要目的是为用户提供一种优雅的界面设计，尤其是在移动设备上，使得表单填写更加直观和便捷。"浮动标签"（Float Label...
在CSS布局中，使用float属性进行元素的左右对齐是一种常见的方式。然而，在实际应用中，有些开发者会遇到同时使用float:left和float:right时，元素无法对齐在同一水平线上，而是出现换行的问题。本文将详细介绍几种...
在JavaScript中，对元素的CSS样式进行操作是常见的任务，这通常涉及到`element.style`对象。这个对象允许我们直接访问和修改元素的内联样式。下面是对标题和描述中提到的一些CSS Style属性在JS中的详细解释： 1. **...
在CSS布局中，`float`属性是一个至关重要的概念，它主要用于创建流式布局，使得元素可以在页面上向左或向右浮动。`float`主要有两个值：`left`和`right`。 `float:left`意味着元素将向左浮动，它会尽可能地靠近左...
在提供的"CSS2+(Chinese).chm"文件中，读者可以找到以上这些主题的详细说明和实例，通过学习和实践，新手将能够快速掌握CSS，从而在网页制作和POLISH中得心应手。记得实践是检验理论的最好方式，所以边学边动手操作...
### CSS属性解释与说明 #### 一、字体样式（Font Properties） **1. `font-size`**: 设置文本的大小。 - **值**：`x-large`、`xx-small`等，还可以设置为具体数值如`14px`。 - **示例**：`font-size: x-large;` ...
### CSS+DIV常用方法说明：理解布局与标签的精髓 #### 概述 在现代网页设计中，CSS（层叠样式表）与HTML中的`<div>`元素是构建页面布局和样式的基石。通过合理利用CSS与`<div>`，可以实现响应式设计、灵活的网格...
最后，CSS2.0手册中的电子书籍说明可能涵盖了如何阅读和搜索手册的方法，以及如何利用手册快速查找所需信息的提示，这对学习和日常开发工作非常有帮助。 综上所述，《CSS2.0手册》全面介绍了CSS2.0的所有核心概念和...
以下是对CSS的详细说明： 1. CSS的基本概念： CSS由W3C（万维网联盟）制定，主要用于定义网页内容的排版、显示、格式化和特效。通过使用CSS，开发者可以将样式规则与HTML内容分离，提高页面的可维护性和复用性。...
此外，浮动（float）和清除（clear）也是控制元素布局的关键概念。 5. **文本样式**：你可以通过CSS2.0来改变文本的字体、大小、颜色、行高、对齐方式、装饰（如下划线、删除线）等。同时，还可以控制字母间距、...
5. **布局技术**：CSS提供了多种布局方式，如浮动布局（float）、定位布局（position），以及现代CSS的Flexbox（弹性盒子布局）和Grid（网格布局）。这些技术可以帮助创建复杂的页面结构和响应式设计。 6. **响应式...
相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？既然是布局，就用float好，这个我比较常用。这个浮动是可以清除的，一般不会影响整体布局。而position，定位，是不受约束的，这个...
CSS2引入了`float`属性，用于创建流式布局。`float`可以设为`left`或`right`，使元素向左或右浮动。`clear`属性用于清除浮动，避免元素被浮动元素影响。 ### 5. 相对和绝对定位 `position`属性允许元素相对于其...
4. **浮动与清除**：`float`属性用于创建浮动元素，常用于创建多列布局。而`clear`属性用于清除浮动，防止父元素因浮动元素而高度塌陷。 5. **响应式设计**：随着移动设备的普及，CSS3引入了媒体查询（media ...
`相关内容.txt`可能包含了更多关于如何使用这些代码的说明或额外的CSS样式。`images`目录则可能包含与悬浮窗相关的图像资源，如图标或背景图片。 总结来说，纯CSS实现的滚动固定元素是一种高效且易于理解的方法，...
- **浮动**：`float`属性用于使元素在容器中浮动，常用于创建多列布局。 - **颜色与背景**：学习如何使用颜色关键字、十六进制、RGB、RGBA等表示法设置颜色，并了解如何设置背景图片、颜色和重复。 - **继承与层叠...
根据给定的信息，我们可以整理出一系列与CSS样式相关的属性及其简要说明。下面将详细介绍这些属性，以便读者更好地理解和应用。 ### 一、链接状态 #### a:link - **描述**：设置未访问的链接的颜色。 - **示例代码*...
5. **浮动布局**：在早期的CSS布局中，`float`属性常用于创建多列布局。元素浮动后，会从当前流中移出，允许其他元素“环绕”它。 6. **定位（positioning）**：CSS中的`position`属性（如static、relative、...