CSS浮动九：float包裹特性（当父一级的div设成浮动（float）之后，其宽度会自适应里面的内容；）

包裹特性：当父一级的div设成浮动（float）之后，其宽度会自适应里面的内容；

目录

1.基准线举例

2.父一级div不是浮动时，其宽度：默认父一级元素的宽度；其高度：默认其中元素的高度；

3.包裹特性：当父一级元素设成浮动时，其宽度会自适应里面的内容。（核心重点）

4.基准线出现的原因，及解决办法

5.浏览器临时编辑、查看效果

附加：多个div嵌套的测试

（1）div1：父一级，浮动；div2：子一级，非浮动：

（2）div1：父一级，浮动；div2：子一级，浮动：

（3）div1：父一级，浮动；div2：子一级，非浮动；div3：子一级，浮动：

---

1.基准线举例

基准线，行高的概念。通常，在一行中，文字内容通常不是紧挨着这一行的下边线的，而是有一段距离；

---

2.父一级div不是浮动时，其宽度：默认父一级元素的宽度；其高度：默认其中元素的高度；

正常情况：父一级元素的高度默认是其中元素的高度，宽度默认是父一级元素的宽度：

效果：div1下面多出来了一点点：基准线问题（这个问题是需要解决的）

---

3.包裹特性：当父一级元素设成浮动时，其宽度会自适应里面的内容。（核心重点）

如果，把父一级元素div1设成float时：

效果：产生了包裹特性；

div实际尺寸：发现，浮动的父一级元素的宽度，自适应里面的内容了

---

4.基准线出现的原因，及解决办法

img是行级元素，只要是行级元素都会出现上面基准线的问题：目的是去除这个东西

解决办法：设置img的垂直对齐方式为底边对齐；这样以后就可以把img改成块级元素

效果：

---

5.浏览器临时编辑、查看效果

---

附加：多个div嵌套的测试

（1）div1：父一级，浮动；div2：子一级，非浮动：

效果：浮动div1的宽度自适应了子元素div2，体现了包裹特性；；；由于子元素div2是块级元素，所以没有出现基准线问题。

---

（2）div1：父一级，浮动；div2：子一级，浮动：

这种情况下，可以理解为div1和div2都成了脱标流，变成了同类，所以。。。知道这种情况就行

---

（3）div1：父一级，浮动；div2：子一级，非浮动；div3：子一级，浮动：

效果：

实际看三个div的位置和尺寸：

下面俩图，重点看div1的宽度的不同：对于这种情况在实际开发中能遇到？自己给自己挖坑的，故意搞复杂，估计很少会这么干，，，，看看吧

当div3的宽设置的非常小时：

div1的宽度：div2的宽度：体现了包裹特性；；div1的高度：div2和div3的高度和；