Question

<div class="container">
    <div class="logo">
    <img src="C:\Users\Ragul\Desktop\my resume html\images.png">
    </div>
   </div>

.container {
 width:100%;
}

.logo img {
float: left;
border: 1px solid black;
}

浮动如何在上述情况下起作用？下一步，我想在div中安装徽标以用于导航目的。应该怎么做？

Answer 1

当您使用浮动图像时，它会取消文档的正常流程。

所以，

1）使用：overflow:hidden

.container {
 width:100%;
 overflow:hidden;
}

2）使用:after

.container:after {
   contant:'';
   display:block;
   clear:both;
}

.container {
    width:100%;
    overflow:hidden;
    background-color: #ccc;
}

.logo img {
    float: left;
    width: 50px;
    border: 1px solid black;
}

<div class="container">
    <div class="logo">
    <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
    </div>
</div>

Answer 2

当元素浮动时，它将从网站流中取出。这意味着在您的情况下，response.getOutputStream().flush();元素不会使用.container元素高度来确定它自己的高度。

解决这个问题的方法是清除子元素float。这涉及在浮动元素之后添加元素并添加.logo img。这些天使用伪元素的一种流行的方法。在你的例子中它看起来像这样。

clear:both

当在div内部给出浮动图像时，div的高度不会增加？为什么？

2 个答案: