1.问题
2.解决
【1】给父元素(box1)设置高度，在企业开发中能不写高度就不写高度，所以通常不采用
原理：
【2】方法2：使用clear属性right，both，left，none（默认)
none:默认取值，按照浮动元素的排序规则来排序（左找左，右找右）
left:不要找前面左浮动的元素
right：不要找前面有浮动的元素
both：即不找左也不找右 ----企业常用这个
原理：不要去找前面的浮动元素
给后面的盒子添加clear属性
注意:
当我们给如果给该元素设置了clear属性，那么margin对它是无效了
【3】方法三
隔墙法：外墙法，内墙法 不常用代码阅读量降低
外墙法：在第一个盒子和第二盒子之间加一个块级元素，然后设置clear属性，第二个盒子的margin-top可以用的，但是第一个盒子的margin-bottom是没有用的，只需要给加的这个块级元素加一个高度就可以了 企业喜欢用
内墙法：添加一个块级元素添加到第一个盒子的最后一个元素的后面，给新的元素设置clear属性
注意点:第二个盒子的margin-top可以用的，但是第一个盒子的margin-bottom是有用的，还可以给额外的元素添加高度
两者的区别：
内墙法可以撑起盒子1的高度，外墙法不可以
【3】方法四 这个最推荐的方式
伪元素 给指定标签的内容添加一个子元素，或者给指定标签的内容后面添加一个子元素,没有高度，visibility：hide将添加的子元素隐藏了
div::before{
content:"";
display:block;
}
div::after{
content:"";
display:block;
}
第四个方式类似内墙法
注意点，兼容问题要加入一句话来兼容IE6
.box1{
*zoom:1;
}
【5】清除浮动的方式5
overflow：hidden可以将超出标签范围的内容裁剪掉，可以用来清除浮动,
给第一个盒子设置overflow属性
考虑兼容IE6
.box1{
*zoom:1;
}
overflow的第三个好处：可以通过它让里面的盒子设置margin-top外边的盒子不会被顶下来
