本文深入解析浏览器如何布局HTML元素，重点讨论块级元素的流式布局和浮动元素、绝对定位元素的影响。块级元素遵循从上到下的顺序显示，内联元素在同一行排列。float属性使得元素脱离正常流，右侧元素会绕过浮动元素。absolute定位则使元素完全脱离流，覆盖其他内容。理解这些原理对于网页设计和布局至关重要。
浏览器是怎么布局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元素
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
