在css中使用float属性时，背景渐变被删除

Question

在div标签上使用float属性时，将删除设置为背景的渐变。最后一个css属性，即div.image中的float属性将删除背景

这是HTML代码

<div class="content">
<div class="info">
<h2>Enter details</h2>
<h3>Username</h3>
<input type="text" name="username">
<h3>Password</h3>
<input type="text" name="password">
</div>
<div class="image"><img class="image" src="C:UsersDesktopNew folderPicturelight-trails-8.jpg"></div>
</div>

这是css代码

div.content{
background: linear-gradient(to right,#0080ff 50% , lightblue);
margin:0px;
padding:0px;
margin-top: 3px;
}
img.image{
width:250px;
height: 250px;
}
div.info{
float:left;
}
/***** After applying this style ****/
div.image{
float:right;
}

这是设计的网页的屏幕截图

在此处输入图像描述

Answer 1

div.content中的子级是浮动的。添加此修复：

div.content {
background: linear-gradient(to right,#0080ff 50% , lightblue);
margin:0px;
padding:0px;
margin-top: 3px;
/*  Add this */
overflow:hidden;
width: 100%;
}