本文详细探讨了网页布局中的三种主要排版方式：标准流、浮动排版和定位排版。在标准流中，网页遵循默认的布局规则。浮动排版通过设置元素浮动，使其脱离文档流，但可能导致父元素高度塌陷，可以通过多种方法如空div、伪元素或BFC来解决。定位排版包括静态、相对、绝对和固定定位，涉及层级提升、坐标计算和元素转换。最后，介绍了css3的flex布局，作为现代网页布局的新选择。
标准流排版
正常网页默认排版方式
浮动排版
- 将行内元素设置为浮动会使行内元素具有块级元素特征
- 不设置宽度时，浮动元素的宽高由内容撑起
- 浮动元素脱离文档流，浮动后的子元素无法撑开父元素
- 针对第3里面的问题，可以设置父元素高度解决元素塌陷
- 浮动元素层级提升后，可以压住标准元素的背景，但文本会环绕浮动元素（因为html中元素由两层组成，一层是元素本身即“原素层”,另一层是元素上方的内容层，还没有浮动时，两个元素的元素层一样高，两个元素的内容层一样高都在元素层上面，当son1的元素设为浮动时，元素层提高，son1的内容层最高，son1的元素层和son2的内容层一样高所以会和son2的内容即文字“我是没有浮动的”层并排而覆盖son2的元素层，）
- 浮动元素会影响前面的标准流，不会影响后面的标准流
最低0.47元/天 解锁文章
扫一扫
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
