CSS 中 float 和 align 属性的区别

Difference between float and align property in CSS

提问by J.K.A.

I am designing a website for my client and do not have much experience in web design and CSS. I also want to design it in standard CSS way.

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

The question is I am quite confused with CSS align property and float property. I know there is much difference between these two properties but I am still not able to handle it correctly at the time of development.

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

Can anyone explain to me the exact difference between these two properties?

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

采纳答案by Prerit Mohan

First I would like to suggest that you refer to the Head First series of CSS and HTML by O'Reilly publications. This is a must read book for those new to designing.

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

So, the float property is used to move a lot of blocks (for example your sidebar, your content area etc.) and the HTML align thing you are talking about, you can do the same in CSS in this way.

因此，浮动属性用于移动很多块（例如您的侧边栏、内容区域等）和您正在谈论的 HTML 对齐内容，您可以通过这种方式在 CSS 中执行相同的操作。

.test{
text-align: right; 
}   

The above code mentioned will be CSS and equivalent HTML code will be.

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

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

For the time being refer to O'Reilly head first with HTML AND CSS, will help you a lot.

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

回答by Ganesh Bora

"text-align" applies to the contentof a box, while "float" applies to the box itself.

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

回答by eusid

Align - You use align to align text and other items rather it be left, right, centered, or justified. Align DOES NOT remove the item from the document flow.

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

Float - Floats an object to the left or right and REMOVES it from the document flow. (i.e. A thumbnail image with paragraph text flowing around it -- you will usually need to set some margins on the image so it looks right).

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

You will most likely be using float to lay the page out. I would suggest the useage of a grid system. Here is the easiest, most compatible grid system I know of to date. http://webdesignerwall.com/trends/960-grid-system-is-getting-old

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

Also you will need to understand what using the classes "first" and what the CSS clearfix does. You will also need to understand generating a baseline grid (vertical grid, not just horizontal) so that all elements not only line up left to right but up and down as well.

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

回答by Mr_Green

If you give floatto the child div then the parent div becomes independent of the dimensions of child div i.e., the parent div will not increase its width and height automatically.(If you haven't given any dimensions to the parent div then it inherits width:0 and height:0)

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

Many designers face problems because of floatbecause it is not friendly with layout but it is very useful. We can make the floatfriendly with layout by using css selector :after.

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

whereas if we give Text-alignto the child div , the parent div will not be affected.

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

This is all I know.

这就是我所知道的。

回答by Web Designer cum Promoter

align is a property to align a single element for table , text, span etc

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

float is a property to align block level elements like sidebar, div etc

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