32

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

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

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

4

6 回答 6

37

“text-align”适用于盒子的内容，而“float”适用于盒子本身。

于 2012-09-28T06:55:17.690 回答
17

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

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

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

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

于 2012-09-28T12:46:20.213 回答
9

首先，我建议您参考 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，会对你有很大帮助。

于 2012-09-28T07:02:03.760 回答
3

如果你给float子 div 那么父 div 变得独立于子 div 的尺寸，即父 div 不会自动增加它的宽度和高度。（如果你没有给父 div 任何尺寸，那么它继承width:0 and height:0）

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

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

这就是我所知道的。

于 2012-09-28T06:57:19.493 回答
1

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

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

于 2012-09-28T07:15:42.667 回答
0

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>

于 2021-06-04T20:05:46.677 回答