源自：2-14 列表--水平定义列表
水平定位列表衍生问题
两个div，第一个左浮动，红色背景，第二个不浮动，正常显示，绿色背景，结果是第一个在上面，第二个在下面，看起来好像是第一个在第二个里面，如果两个div里面都有内容，为什么第二个的内容会在第一个div内容的后面，而不是两个div内容部分重叠呢
提问者：六liu六
2016-06-18 11:52
个回答
-
- 周龙帆
- 2016-06-25 00:42:36
对于我来说，我不明白他这里为什么要加clear：left,不是用来清浮的，真宁玛费解
-
- 周龙帆
- 2016-06-25 00:30:52
浮动元素脱离普通流，其有3个特点，1、浮动元素高度会塌陷。也就说高度为0. 2、浮动元素内容还会占领他大小， 也就是行框（line box）的宽高。3、会覆盖同级的内容 （不是BFC的元素就会被浮动元素覆盖，这个看你兴趣，想了解，可以搜搜可视化格式模型）
再解释你的问题：因为他高度为0，所以他不会占空间，绿色DIV就占了他位子，由特点3知道红色是覆盖在绿色上面，但浮动元素内容要占领他该有的位子,所以就造成上面那鸟样。
-
- 周龙帆
- 2016-06-25 00:13:55
浮动元素脱离普通流，其有3个特点，1、浮动元素高度会塌陷。也就说高度为0. 2、浮动元素内容还会占领他大小， 也就是行框（line box）的宽高。3、会覆盖同级的内容 （不是BFC的元素，这个看你兴趣，想了解，可以搜搜可视化格式模型）
再解释上面内容：因为他高度为0，所以他不会占一行，其内容是由行框撑起，所以他要有自己的位子，并由特点3覆盖了绿色背景的内容。
-
- 慕姐2158687
- 2016-06-18 12:17:37
因为DIV默认的是块级元素