HTML布局

浏览器是怎么布局HTML的元素的？

浏览器获取HTML文档后，先安置块级元素。从HTML的第一个块级元素开始，从上到下的的顺序显示所有的块级元素。一个块级元素，换行，再一个块级元素。这就是flow。

块级元素内的内联元素一个挨一个的排列。一行排不完，排到第二行去。

每个元素都是一个box。

两个相互靠近的内联元素的margin为两个内联元素的margin之和。

当一个块级元素出现在另一个块级元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并合并之后的外边距为两个块级元素最大的那个margin值。

float属性

当一个元素设置了float属性，它就不是正常的元素，不遵从flow原则

floated元素必须要设置一个width属性。浏览器按照从上到下的顺序安排块级元素，安排好了h1,h2,碰到有float：right的元素p,把它浮动到最右边。继续安排后面的h2,p,等元素。

因为floated不是正常的元素。其后面的块级元素会当作它不存在，占据了它的位置。但是块级内的内联元素很绅士，还是尊重了floated元素的边界，没有越界。

在正常的元素设置clear：right 表示不要在该元素右边放置floated元素。

有position：absolute的元素跟floated元素类似，不仅其后面的块级元素会当作它不存在，连内联元素也会忽视它，占据了它的位置。最终的结果是absolute元素会覆盖一部分块级元素的内容。正常元素不能通过使用clear属性避免absolute元素