CSS中float和align属性的区别

Question

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

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

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

Answer 1

"text-align"适用于框的内容,而"float"适用于框本身.

Answer 2

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

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

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

您还需要了解使用"first"类和CSS clearfix的功能.您还需要了解生成基线网格(垂直网格,而不仅仅是水平网格),以便所有元素不仅可以从左到右排列,也可以上下排列.

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

目前暂时使用HTML和CSS参考O'Reilly首脑,对您有很大帮助.