.box{border:1pxsolidblack;填充：5px；宽度：450px；}.left{宽度：100px；高度：100px；背景色：红色；向左飘浮;}.right{宽度：100px;高度：100px；背景色：红色；浮动：对；但我得到了这个效果：WTF！为什么是这样？？？和我想的不一样！！！为什么？？？2、找原因。原因是浮动元素会脱离文档流。文件流出的是什么？比如，有一天你对老板说：“我不想干了，世界那么大，我想去看看”，那么从今往后，你的老板就管不了你了。脱离文档流也是如此。元素一旦浮动，就会离开文档流，其父元素就无法再控制它，布局就会向前移动。这就是上面父元素的高度塌陷的原因。要想解决以上问题，就得使出浑身解数，这也是面试官通常会问的问题。告诉我你通常如何清除浮动。这个时候回答的越多越好，嘿嘿！！1.设置父级为float.box{border:1pxsolidblack;填充：5px；宽度：450px；float:left}缺点：这种方法弊大于利。想一想，父级别设置为浮动的话，爷爷类肯定会再次受到影响，必须解决爷爷类的身高崩塌问题。这不是无限娃娃吗？？2.父级添加定位absolute.box{border:1pxsolidblack;填充：5px；宽度：450px；height:100px}缺点：position:absolute也会脱离文档流，影响整体布局，这不是给自己找罪吗？3.设置overflow:hidden.box{border:1pxsolidblack;填充：5px；宽度：450px；溢出：隐藏}为父母。缺点：当文本太长，包含太长的英文时，英文文本会被隐藏