首页 > 试题广场 >

阅读如下代码：

[单选题]

阅读如下代码：

<style type="text/css">
.a, .b, .c {
    box-sizing: border-box;
    border: 1px solid;
}
.wrap {
    width: 250px;
}
.a {
    width: 100px;
    height: 100px;
    float: left;
}
.b {
    width: 100px;
    height: 50px;
    float: left;
}
.c {
    width: 100px;
    height: 100px;
    display: inline-block;
}
</style>

<div class="wrap">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

请问 wrap 这个 div 的高度是多少？

```
100px
```
```
150px
```
```
200px
```
```
250px
```

查看正确选项

没头脑的派大星

因为他都是向左浮动他的宽度是200，所以wrap的高度应该是，B+C=150px

发表于 2019-02-24 12:49:52 回复(10)

张智敏-

如果C 没有 display: inline-block; 那么C会直接和a重叠，虽然文本让出位置也就是c会出现在a的下边界下方. 但是高度仍然是100px.

这里的关键在于 display: inline-block 使得 C内部形成了BFC, BFC不与float元素重叠. 所以会出现在紧贴着a的右边界以及b的下边界的位置出现.

发表于 2019-03-09 16:11:19 回复(10)

来瓶可乐

部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

发表于 2019-02-27 16:28:13 回复(2)

YY@GG

display:inline-block会形成BFC，即块级格式化上下文，它是一个独立渲染的区域，并且与外部区域毫不相干，不会与浮动元素重叠。

因此会排在b后面，但是父盒子规定了宽度，所以就会飘下来。

发表于 2019-04-13 22:20:06 回复(3)

牛客396250080号

图片说明

发表于 2021-08-23 20:25:27 回复(0)

夜寻极光。

BFC不会与浮动元素重合

BFC是块级格式化上下文，生成BFC条件：

1.浮动

2.position不为static或relative

3.overflow不为visible

4.display为inline-block、table-cell、flex、table-caption或者inline-flex

发表于 2021-09-02 16:34:45 回复(0)

豆豆龙1997

c设置 display: inline-block开启BFC，开启BFC的元素不会被浮动元素覆盖，c是行内块元素（元素排列在一行，支持宽高和内外边距的设置），因此它将排在b元素之后，外部容器的宽度不够，因此排列在a之后，b的下面，外部容器的高度由此被撑开。

发表于 2021-08-11 14:01:48 回复(1)

牛客591388833号

wrap宽度250 a.b.c宽度为300 a.b左浮动占据200宽度 C是行内块元素不会自成一行但是宽度不够了所以被挤下来结果wrap的好就是a+c的高为150 且已设置border-box模式边框也算在总体盒子高度内

发表于 2021-08-06 23:47:08 回复(1)

喰學長『龘』

sad

发表于 2019-02-25 00:13:22 回复(0)

…201909091230891

做错的原因：1.记错了div作为块级标签是可以设置高度的，行内标签设置宽高无效，默认宽高为自己内容大小。

特别要注意的点: 1.需要注意宽度，c-div设置display：inline-block;触发了BFC，宽度的限制，使得c流动到b的下面。若没有触发BFC，a会覆盖c

2.仍然是要注意宽度，若设置a b右浮动，在父盒子宽度足够大的情况下，即使display：inline-block,也不会覆盖。

发表于 2022-05-15 09:33:53 回复(1)

学前端的菜鸡罢了

关于BFC的叙述可以看其他楼的回复，这里主要解释为什么C紧贴着a的右边界以及b的下边界，但是注意到wrap的宽度是250，不够容下c，那么c只能向下另起一行，贴着a的右边以及b的下边

发表于 2023-11-29 23:09:54 回复(0)

realsec

发表于 2023-11-14 11:44:40 回复(0)

牛客661587050号

首先c触发了BFC布局布局不受浮动元素的影响。其次行内块元素在默认情况下不会强制换行，它们会尽量在同一行上显示，直到占据行的宽度不够。这道题显然宽度不够，然后元素向下挤从上往下挤，当遇到宽度够的情况就是这个元素放置的位置，而之所以不在a下面是因为从上往下挤的过程中在a下面之前还有更近的地方，那就是b的下面，因为是从下往下找的。

发表于 2023-11-08 19:58:21 回复(0)