当父元素包含了两个子元素，两个子元素为浮动的各种情况。设置了粉色背景的是父元素，黄色背景的为第一个div元素，绿色背景的为第二个div元素。
1.默认样式是没有浮动，所以两个块级元素占了两行。
正常两个div的排列方式
补充：
行内元素和块级元素的区别
1. 块级元素会独占一行，其宽度占满父元素的宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
2） 块级元素可以设置 width, height属性，行内元素设置width, height无效
【注意：块级元素即使设置了宽度，仍然是独占一行的，其余占据的位置由外边距来填充】
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
2.因为第一个元素从正常的文档流脱离了，所以第二个元素直接就跑上去了占据了整行的位置。为了方便显示，我将第二个div的宽度设得比第一个的宽度大。
第一个元素设置浮动
2.1顺便说一下文字环绕浮动元素的情况，在深绿色的容器中添加了文字，于是就变成了
第一个元素浮动，第二个元素带文字
我设置了深绿色的宽度是400，草绿色的宽度是300，由于文字（不换行的情况）的宽度少于100px，所以就在草绿色的div右边。而这也是float元素和绝对定位元素的最大区别
试验下：就把第二个元素的文字遮挡拉
第一个元素设置了绝对定位
如果元素同时设置了浮动和绝对定位，则浮动是没有效果的哦。
3.因为第一个没有设置float的元素正常占据了整行的位置，所以第二个div只能乖乖地往下一行跑咯，因为元素是在文档中是由上至下去排列的。
第二个div设置浮动
4.两个元素按左到右排列
两个都是浮动元素
网友评论