我是妹妹是娜娜莉,是个正在学习前端的小白,如果本文章有错的话,请谅解,望大佬指正

什么元素会出现换行问题?

答:

行内元素,行内块元素和浮动元素会出现换行问题
块元素不会出现换行问题,因为它默认占用一行

所以我们只需要探讨行内元素,行内块元素和浮动元素的换行问题

只有行内元素(文字)的换行

先拿中文来看,中文默认是到文字尽头就进行换行

再看看英文的,是不是发现了什么问题,英文后面有很多空白

为什么英文后面有这么多空白呢?

答: 因为英文单词要保证单词的完整性,不会被曲解,所以足够放下一个单词才会放,不够放的话就会进行换行

如何解决留空白问题呢? 答: 使用 word-break属性,这个属性可以解决英文单词的换行问题,不过我们不过多对这个属性进行探究

只有行内块元素的换行

注意观看以下元素

如果再设置一个width:120px的行内块元素会怎么样?

答:会进行换行,这不是废话吗?请大家耐心慢慢往下看,注意:这里的间隙是由vertical-align引起的,详情请观看我的(现在还没写哎嘿)

只有浮动元素的换行

注意观看以下元素,所有子元素全部左浮动

如果这时再添加一个width:130px,height:50px和float:left的元素会怎么样? 答:会进行往前贴靠

如果增加他的width会怎样? 答:还是会进行往前贴靠

直到到父元素的边界后就不再进行贴靠,再增大width就会超出显示

行内元素(文字)和行内块元素混合换行

默认的元素换行是这样的,为什么会出现这样?因为行内元素和行内块元素默认是baseline对齐的,如果不明白baseline如何判断,请观看我的vertical-align的使用之baseline的确定

行内元素(文字)和浮动元素混合换行

这样是不是感觉符号我们的预期了,对对对,就应该这样换行,可是为什么这样就可以了呢? 答: 因为设置了float后,元素就变成了块级元素等一下,你不是说块级元素默认占用一行吗?为什么蓝色元素可以和文字并排显示呢? 答: 因为浮动元素比较特殊,默认是脱离标准流的,记住就可以

所以我们可以使用这个特性做文字环绕效果,如下

等一下,为什么照片和下面的文字直接有空白啊,岂可修? 答: 因为右边的文字temporibus又重新生成一行了可以调整照片大小,保证右边不要多行

行内块元素和浮动元素混合换行

你可能有这样的疑问,我好想记得浮动的元素会遮挡住标准流的元素啊,其实你说的没错,浮动的元素会遮挡标准流的元素,但仅仅是块级元素,但是不会遮挡主行内块元素和行内元素(文字),因为行内块元素会触发BFC

注意如下代码:

        .d{
            display: inline-block;
            width: 80px;
            height: 80px;
            background-color: blue;
        }
        .e{
            float: left;
            width: 130px;
            height: 50px;
            background-color: green;
        }
        .g{
            float: left;
            width: 50px;
            height: 50px;
            background-color: orange;
        }

    <div class="a">
        <div class="d"></div>
        <div class="e"></div>
        <div class="g"></div>
    </div>

仔细观看以上代码你就会发现,哎?为什么不是蓝色的在左边,而是在右边呢? 答: 蓝色盒子默认会被挡住,但是因为display:inline-block触发了BFC,BFC不允许有浮动的元素挡在自己,但是浮动的元素还是要考左进行贴靠的,所以蓝色盒子做出妥协

如果增加橙色盒子的宽度你就会发现奥秘

为什么蓝色盒子没有被挤下去?而是橙色盒子自己下去了? 答:虽然看起来是上面的图片那样排列的,但是其实遵守的还是这样的情况,所以增加橙色盒子宽度会把自己给挤下去,增加绿色盒子宽度会把橙色挤下去

总结:

只有文字的换行就是简单的换行,中文和英文不一样,英文默认保留单词的完整性
只偶有行内块的换行也是简单的换行,注意行内块元素默认baseline对齐
只有浮动元素的换行会进行往前贴靠,如果贴靠到父元素的边界就不会再进行贴靠
文字和行内块的混合换行是简单的换行,注意行内块元素和行内元素文字默认baseline对齐
文字和浮动元素的混合换行不会进行baseline对齐,会出现字围现象
行内块和浮动元素的混合换行与编写的顺序有关,默认浮动元素不会遮挡行内块元素

css之换行问题