【关于HTML文档标准流和css浮动的详细讲解】

来自up主幻想家姜时一

有一天，我在珠穆朗玛峰下奔跑。

标准文档流

在这里先说一下什么是标准文档流。

标准文档流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。及标签默认的排版方式

• 标准文档流：指的是元素排版布局过程中，标签的一个“默认”状态。元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准文档流的特点：三微观现象、三元素等级

三微观现象

1. 空白折叠现象：无论写多少个空格（或者换行），最终显示的都只有一个空格
2. 底边对齐现象：当排列在同一行的元素高度不一致的时候，会出现底边对齐的现象
3. 自动换行：当一行展示不下的时候，会自动排列到下一行现象

三元素等级

1. 块级元素

特点：

• 可以设置宽高。如果不设置宽高，会被内容自动撑开高度！
• 必须独占一行，不能与其他元素并排显示。

2. 行内元素

特点：

• 不能正常加载 height、width 属性。

• 无论是否设置 height、width 属性， 高度和宽度都只能被内容自动撑开

• 可以与其他行内、行内块元素并排显示！

3.行内块元素

特点：

• 行内块元素可以设置宽高。

• 行内块元素可以并排一行显示。

• 如果没有设置宽高，则会被内容自动撑开。

• 行内元素可以同时设置宽高，和并排显示。

这些以前的学习笔记都说到，在这里就当是复习了。

虽然我们可以通过css 属性display 可以更改元素的显示模式，但还是不能改变标准文档流的性质，页面只能从上往下加载，并且存在三微观现象，
所以想要实现更多的界面布局效果，需要脱离标准文档流的限制！

对于脱离标准文档流的方法，有三种吧好像😂😂😂：

• 给元素添加浮动࿱