文档流及其特性 块级元素与行内元素的区别 浮动的清除方法（解决浮动塌陷）

标准文档流

web页面的制作，是一个“流”，必须从上到下，像是“织毛衣”。

标准文档流的特性

1.空白折叠现象

无论有多少个空格，换行，tab，都会折叠成一个空格。

2.高矮不齐，底边对齐

对齐形式以底边对齐为主，而不是顶部对齐。

3.自动换行，一行写不完，自动换行写。

行内元素与块级元素

标准文档流等级森严，便签分为两种等级：

• 行内元素
• 块级元素

块级元素与行内元素的区别：

1.块级元素独占一行，行内元素只占一行的一部分。

2.行内元素会与其他行内元素并排。

3.行内元素不能设置宽高，默认的高度就是文字的高度。

4.块级元素可以设置宽高，如果不设置宽高，那么宽度将默认变成父元素的100%。

​

块级元素：p、div、h、li、dt、dd

行内元素：b、span、em、u、a、i

行内元素和块级元素的相互转化

通过display这个属性将两者相互转化

块级元素转化为行内元素

display:inline

行内元素转化为块级元素

display:block

设置完成之后，这个行内标签就变成了块级元素，以span为例子

• 该span标签可以设置宽度与高度
• 该span独占一行
• 如果不设置宽度，那么将撑满父元素

标准流里面的限制很多，如果我们班现在就要并排，并且要设置宽高，我们就可以:脱离标准流

在css中，我们可以使用三种方法，使一个元素脱离标准文档流：

• 浮动
• 绝对定位
• 固定定位

一个元素浮动以后，比如span元素，产生浮动以后，就能够并排了，并且能够设置宽高，就不会有什么行内，块级之分。

标准流中的文字不会被浮动的盒子遮挡住，当一个p标签的文字在标准流文档中，一个div通过浮动到了p标签上面，文字会形成字围效果，字体包围着图片。

一个浮动的元素，如果没有设置 width，那么将会自动收缩到内容的宽度。

如果一个元素要浮动，那么它的祖先一定要有高度。

有高度的盒子，才能关的住浮动。

浮动的清除

清除浮动与浮动之间的影响

1.给浮动的祖先元素加高度，这个高度要大于孩子的高度。

（不推荐，高度一般让内容撑高）

2.使用clear：both；

clear就是清除，both指的就是左浮动右浮动都要清除，但是由于两个浮动的元素没设置高度，所以清除浮动后，margin属性失效了。

3.隔墙法

在两个浮动的元素中间，加上一个空div，并且将div设置clear：both，并且加上高度，达到margin的效果。

4.内墙法

在父元素中加上一个有高度元素，把父元素撑高，

5.overflow：hidden

没有设置高度的父元素不能被浮动的子元素撑开高度，但是给父元素加上overflow：hidden之后，父元素就能被子元素撑开了。