CSS中float和align属性的区别答案

【问题标题】：Difference between float and align property in CSSCSS中float和align属性的区别
【发布时间】：2012-09-28 06:53:05
【问题描述】：

我正在为我的客户设计一个网站，但在网页设计和 CSS 方面没有太多经验。我也想以标准的 CSS 方式设计它。

问题是我对 CSS align 属性和 float 属性感到很困惑。我知道这两个属性之间存在很大差异，但在开发时我仍然无法正确处理它。

谁能向我解释这两个属性之间的确切区别？

【问题讨论】：

标签： css

【解决方案1】：

"text-align" 适用于框的 content，而 "float" 适用于盒子本身。

【讨论】：

【解决方案2】：

对齐 - 您使用对齐来对齐文本和其他项目，而不是左对齐、右对齐、居中对齐或对齐。对齐不会从文档流中删除项目。

浮动 - 将对象向左或向右浮动，并将其从文档流中移除。（即带有段落文本的缩略图图像——您通常需要在图像上设置一些边距以使其看起来正确）。

您很可能会使用浮动来布局页面。我建议使用网格系统。这是迄今为止我所知道的最简单、最兼容的网格系统。 http://webdesignerwall.com/trends/960-grid-system-is-getting-old

您还需要了解“首先”使用类的内容以及 CSS clearfix 的作用。您还需要了解如何生成基线网格（垂直网格，而不仅仅是水平网格），以便所有元素不仅从左到右排列，而且也上下排列。

【讨论】：

【解决方案3】：

首先，我建议您参考 O'Reilly 出版物的 Head First 系列 CSS 和 HTML。对于刚接触设计的人来说，这是一本必读的书。

因此，float 属性用于移动很多块（例如您的侧边栏、您的内容区域等）以及您所说的 HTML 对齐，您可以通过这种方式在 CSS 中做同样的事情。

.test{
text-align: right; 
}

上面提到的代码将是 CSS 和等效的 HTML 代码。

<div class="test"> This text will be aligned from right </div>

暂时先参考 O'Reilly head first with HTML AND CSS，对你有很大帮助。

【讨论】：

【解决方案4】：

如果您将float 分配给子 div，则父 div 将独立于子 div 的尺寸，即父 div 不会自动增加其宽度和高度。（如果您没有为父 div 然后它继承width:0 and height:0)

许多设计师因为float而面临问题，因为它对布局不友好但非常有用。我们可以使用 css 选择器 :after 使 float 与布局友好。

而如果我们将Text-align 分配给子 div ，则父 div 不会受到影响。

这就是我所知道的。

【讨论】：

【解决方案5】：

align 是对齐表格、文本、span 等单个元素的属性

float 是一种对齐块级元素（如侧边栏、div 等）的属性

【讨论】：

【解决方案6】：

text-align 应用于容器中的文本，而 float 应用于容器本身。示例：

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.textAlign {
  text-align: right;
}

.float {
  float: right;
}

<div class="textAlign">text align example</div>
<br>
<div class="float">float example</div>

【讨论】：