                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

水平定位列表衍生问题

两个div，第一个左浮动，红色背景，第二个不浮动，正常显示，绿色背景，结果是第一个在上面，第二个在下面，看起来好像是第一个在第二个里面，如果两个div里面都有内容，为什么第二个的内容会在第一个div内容的后面，而不是两个div内容部分重叠呢

六liu六

2016-06-18

源自：玩转Bootstrap（基础） 2-14

关注问题我要回答

884

操作

收起

4 回答

周龙帆
2016-06-25

对于我来说，我不明白他这里为什么要加clear：left,不是用来清浮的，真宁玛费解

0 回复有任何疑惑可以回复我~

收起回答

周龙帆

想明白了，浮动元素规则里有包裹性，也就是说他会呈现display:inline-block的效果，如果第一个浮动元素后面有足够的空间（这里指dd这标签的内容不多）来容纳第二个浮动元素，第二个浮动元素会与第一个浮动元素排在一起，造成布局影响

2016-06-25 回复有任何疑惑可以回复我~

周龙帆
2016-06-25

浮动元素脱离普通流，其有3个特点，1、浮动元素高度会塌陷。也就说高度为0. 2、浮动元素内容还会占领他大小，也就是行框（line box）的宽高。3、会覆盖同级的内容（不是BFC的元素就会被浮动元素覆盖，这个看你兴趣，想了解，可以搜搜可视化格式模型）

再解释你的问题：因为他高度为0，所以他不会占空间，绿色DIV就占了他位子，由特点3知道红色是覆盖在绿色上面，但浮动元素内容要占领他该有的位子,所以就造成上面那鸟样。

0 回复有任何疑惑可以回复我~

收起回答

周龙帆
2016-06-25

浮动元素脱离普通流，其有3个特点，1、浮动元素高度会塌陷。也就说高度为0. 2、浮动元素内容还会占领他大小，也就是行框（line box）的宽高。3、会覆盖同级的内容（不是BFC的元素，这个看你兴趣，想了解，可以搜搜可视化格式模型）

再解释上面内容：因为他高度为0，所以他不会占一行，其内容是由行框撑起，所以他要有自己的位子，并由特点3覆盖了绿色背景的内容。

0 回复有任何疑惑可以回复我~

收起回答

慕姐2158687
2016-06-18

因为DIV默认的是块级元素

0 回复有任何疑惑可以回复我~

收起回答

六liu六提问者

首先谢谢你回答我的问题，但好像你的回答解释不了我的问题。是块级元素，我是想知道既然第一个元素好像是在第二个里面，但是没有在第二个里面，为什么第二个里面的内容不是从头开始的，而是在第一个内容后面开始，就是说为什么文字部分没有重叠的

2016-06-18 回复有任何疑惑可以回复我~

0/150

提交

取消

玩转Bootstrap（基础）

参与学习 314544 人
解答问题 2275 个

告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap

进入课程

本课相似问答

2 回答水平表单的label

2 回答问题：相邻按钮都有下拉列表，这两个相邻按钮会水平排列

2 回答为什么我的水平表单显示的不是水平的，input的宽度不是100%，说明不是基础表单了，就是不水平

2 回答水平表单有横拉条有人解决吗

7 回答定义列表答案

搜索更多本课相关问答

水平定位列表衍生问题

我要回答关注问题

热搜

最近搜索清空

水平定位列表衍生问题

4 回答

本课相似问答

水平定位列表衍生问题