Html 如何在文本旁边浮动图像，中间有间隙

我试着把我的公司名称部门排在我的标识部门旁边。我也试着在两者之间搭讪。我知道两个div都需要有宽度，并且需要向左浮动，但我不确定我是否需要一个清晰的：两个都是，或者我只是完全离开了

这就是我想要的最终结果

HTML

使用以下命令：

#logo{
float:left;
width:25%; /* adjust it */
margin-right:5%; /* adjust it */
}

#company_name{
float:left;
width:70%; /* adjust it */
}

.clearfix:after, #flat:after{
 display: table;
 clear: both;
 content: " ";
 }

---

如果我可以提出一个建议，描述一下CSS的作用可能会对提问者有所帮助。

#main_header    {

background:#4f63a6;
}

#company_name{
float: left;
margin-right: 70%;
width: auto;



}

#logo img  {

float: left;
margin-right: 25%;
max-width: 30%;
height: auto;

}


#company_name h1{
font-weight: 200;
color: #fff;
line-height: 1em;
font-weight: 100;
font-size: 20px;    
}

#company_name h2{
font-weight: 200;
color: #fff;
}

#logo{
float:left;
width:25%; /* adjust it */
margin-right:5%; /* adjust it */
}

#company_name{
float:left;
width:70%; /* adjust it */
}

.clearfix:after, #flat:after{
 display: table;
 clear: both;
 content: " ";
 }