一、网页布局

1.标准文档流

网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流。

---

(1)标准文档流的组成

不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则如下：

块级元素：<h1>…<h6>、<p>、<div>、列表等。特点：独占一行。

行内元素：<span>、<a>、<img>等。特点：由内容撑开。

注意：行内元素可以包含在块级元素内，成为它的子元素，而反过来则不成立。

---

二、display属性

块级元素使用inline属性会显示行内元素的特性。

行内元素使用block属性会显示块级元素的特性。

而元素使用inline-block属性会同时具有两者的特性。

比如：<span>使用inline-block可以设置宽高属性。而inline-block则可以让多个<div>并排显示。

display属性值和说明

---

三、浮动（float）

float属性指定一个盒子（元素）是否应该浮动。

float的属性和值 代码 浮动实现文字与图片并排显示

---

四、清除浮动（clear）

指定段落的左侧或右侧不允许浮动元素。

clear的属性和值 代码

---

五、解决父级边框塌陷的4种方法

图为父级边框塌陷

(1) 浮动元素后面加空div

代码 效果

---

(2) 设置父元素的高度

代码 效果

---

(3) 父级添加overflow属性

代码 效果

---

(四)父级添加伪类after

代码 效果图

---

四种方法小结：

浮动元素后面加空div：简单，空div会造成HTML代码冗余

设置父元素的高度：简单，元素固定高会降低扩展性

父级添加overflow属性：简单，下拉列表框的场景不能用

父级添加伪类after：写法比上面稍微复杂一点，但是没有副作用，推荐使用

---

六、inline-block和float的区别

inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。

float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。