Question

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

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

有人可以向我解释这两个属性之间的确切区别吗？

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

因此，float属性用于移动很多块（例如你的侧边栏，你的内容区域等）和你正在讨论的HTML对齐的东西，你可以用这种方式在CSS中做同样的事情。 / p>

.test{
text-align: right; 
}

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

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

目前暂时使用HTML和CSS引用O＆＃39; Reilly首先对您有所帮助。

Answer 4

如果您将float赋予子div，则父div将独立于子div的维度，即父div不会自动增加其宽度和高度。（如果您没有给出任何维度到父div然后它继承width:0 and height:0）

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

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

这就是我所知道的。

Answer 5

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

float是一个对齐块级元素的属性，如sidebar，div等

Answer 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>