浮动在盒子的位置问题求解答

Question

我最外面一层用banner的大盒子，里面在中心有个w的盒子，然后w盒子有背景，w盒子里面还有两个盒子也就是subnav和couser盒子

为什么我的subnav盒子用左浮动到父盒子w的中间去了

这是我的html部分的代码

下面是css样式

```css

• {
  padding: 0;
  margin: 0;
  }

/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}

.banner {
height: 420px;
background-color: #1c036c;
}

.banner .w {
height: 420px;
/* 背景图片写法 no-repeat不重复 */
background: url(images/banner.png) no-repeat top center;
}

.banner .w .subnav {
float: left;
width: 192px;
height: 420px;
/* 用半透明 */
background-color: rgba(0, 0, 0, .3);
}

.banner .w .subnav ul li {
height: 15px;
line-height: 15px;
padding-left: 20px;
padding-top: 27px;

}

.banner .w .subnav ul li a {
font-size: 14px;
color: #fff;
}

.banner .w .subnav ul li a span {
float: right;
padding-right: 20px;
}

.banner .w .subnav ul li a:hover {
color: #00b4ff;
}

.banner .w .course {
float: right;
width: 230px;
height: 300px;
background-color: pink;
}

```，
而我的subnav盒子添加浮动，我的course盒子没有添加浮动，效果图就变下面这种了

求解答！！

Answer 1

.w加一个overflow:hidden