问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

css浮动的诡异现象

头像
儿独
    729144462
    <!DOCTYPE html>
<html>
<head>
    <style>
    .test1{
        float: left;
        margin:  10px -15px 10px 10px ;
    }
    p.test2{
        padding: 0.5em;
        border:1px solid red;

    }
    p.test2 strong{
        padding: 2px;
        border:3px solid beige;
        background: forestgreen;
    }
    </style>
</head>
<body>
<div>
<img src="http://oe3uqot64.bkt.clouddn.com/20160927147494395016925.jpg?imageView2/0/format/jpg" class="test1">
</div>
<p class="test2">sdfsdfsdfsdfsdfsd<strong>trfsdfsdfsdf</strong>ssdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsf</p>

</body>
</html>

    为什么对图片添加浮动之后，能够撑起p元素的边框。图片的包含块也不是p元素呀

    css
    阅读 3k
    4 个回答
    得票最新
    头像
    佣才
      1356

      你把图片的浮动清了就可以了

      头像
      游泳的鱼
        9814212

        test2没有浮动，而图片有浮动，所以p就会靠近图片，从而撑起p的大小

        头像
        zhayes
          1.2k16134202

          浮动的原意本来就是做图文环绕的。就那上面那个例子来说，图片浮起来了，p顶了上去，但是p标签里面的默认文字不会图片遮住，所以会自动偏移过来。这种偏移的范围是不仅受图片的宽高决定，而且受其边距影响。你可以这样理解，因为 图片的宽高跟边距都是属于图片这一个整体。前面说了浮动的情况下 文字默认不会被图片遮住，而图片不仅有宽高也有边距，属同一个整体范围，图片不会遮住，不仅仅是说图片的宽高范围不会覆盖，就连他的边距也不能覆盖。

          头像
          残阳映枫红
            6.1k42230

            1. 图片浮动后撑起 p 元素是你的错觉.

            2. 图片浮动后, 本身已经脱离常规流; p 在常规流里面的位置同图片所在的位置在视觉上是同一个起始点, 因此 p 的边框也正是从图片的外边缘开始绘制.

            3. 图片占据空间后, p 内元素被压缩, 由于你这里全是英文字母, 默认地没有允许单词内断行, 所以文本才会全跑到下面去.

            4. 你要是给 p 加一个 word-break: break-all 就不是这个所谓的"撑起"效果了.

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题