父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？

Question

父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？

PetalsOnaWet

25611327

发布于
2016-07-11

更新于
2016-07-11

dom结构

如图img加上float 子元素div显示正常。

不加float div显示错位。

附上我写的一个dome测试用的，大家可本地看下究竟是什么原因。最新的发现是，子元素div不加内容，怎样都正常，加内容就会出现我所说的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            font-size:62.5%;
            height: 100%;
        }
        img{
            margin: 0;
            padding: 0;
            border:0;
        }
        .wrap{
            width: 100%;
            height: 10%;
        }
        .wrap img{
            max-height: 100%;
            max-width: 20%;
            /* float: left; */
            width: 20%;
            height: 100%;
        }
        .name{
            display: inline-block;
            width: 50%;
            height: 100%;
            background:#ccc;
        }
    </style>
</head>
<body>
<div class="wrap">
    <img src="http://images.freeimages.com/images/premium/large-thumbs/7238/7238811-blank-red-hardback-book.jpg" alt="">
    <div class="name">sssss</div>
</div>
</body>
</html>

css 前端

阅读 7.1k

1 个回答

guangpunba

✓ 已被采纳

因为img和div都是inline-block，所以他们是按基线对齐（图片的底边和div中最后一行文字的底边对齐的），加float图片脱离了文档流所以div顶部可以和img顶部对齐了，不加浮动也用vertical-align: top也可以
图片描述