float属性与clear属性综合讲解与实例

float属性与clear属性综合讲解与实例

一、float属性

对于float属性，要考虑两种布局情况，

1）父元素内容和本元素交错的布局

即父元素包含文本和子元素。该种情况还好理解，就是简单的文本环绕；例如在一个段落<p>内除了文字外，还有图片<img>（子元素）,
此时若<img>设置了float：left;则表示图片靠在整个段落的左边，段落文字环绕在图片旁边展开。

2）父元素的子元素和本元素交错的布局

设置了float属性，该元素就可以在可用的空间尽可能的左（右）靠。例如：若设置的float：left; 则：
a）本行若有足够的空间放置本元素，则在此行，且紧靠与前一个同级元素的后面（右面）；
b）若没有足够空间，则在下面的行的最左边。
同理，类推float：right; 的情况。

二、clear属性

该属性是针对float属性来的。主要清除其他浮动元素（设置了float属性的元素）对本元素位置的影响。非浮动元素不受其影响。

三、两属性的综合使用实例分析

这里我们定义四个块级元素，A、B、C、D。四个元素是兄弟关系，在文档中按字母顺序定义。则

1、若 A、B、C、D均设置float：left; 

1.1 且一行可以放置四个元素，则布局为

ABCD

1.2 一行只可放置两个元素，则布局为

AB
CD

1.3 一行只可放置1个元素，则布局为

A
B
C
D

2、若 A、C、D均设置float：left; 而B未设置，则文档流将出现元素重叠现象，即

B/A(B在下，A在上；即常规元素在下，浮动元素在上。）
C
D

3、重点说下设置clear属性的情况

clear属性清除的是“前面”（定义的）浮动元素对自己的影响。W3.org官方的解释“元素盒子的边不能和前面的浮动元素相邻”，也正说明的此点，
现在还是不是不太明白，看了下面的实例解释你就明白了

3.1 若 A、B、C、D均设置float：left; 且C设置clear：left；

AB
CD
// 分析：正常情况是如1.1描述的情况，但C设置clear：left；表示清除C元素前面的左浮动，或者叫禁止C前面有左浮动元素，但文档流是顺序解析的，
// AB元素已经正常排好，你C不想左边有人乱动，哦，不对，是浮动。那你就自己去站一行好了，于是，C元素就出现在了下一行，
// 而D只是知道要靠着左边的元素即可，C元素在哪行D在哪行。

// 接着，设定B右浮动float：right，C元素仍然出现在下一行，因为他前面还有左浮动的A元素，即,此时布局为：
// A           B
// CD

// 再进一步，如果AB均改为右浮动float：right，即出现了很好玩的一幕，第一行的左边被空出来了，C立即过去抢沙发，即最后布局为：
// CD           BA            // 此处为什么A在B的右侧，因为优先放置的A。
// 还有一点就是，此种情况，C元素设置clear：left；已经可有可无，因为，C元素在文档流里，左侧没有元素了

3.2 若 A、B、C、D均设置float：left; 且C设置clear：right；

ABCD
// 分析：因为在C前面的元素不是右浮动的，而D虽然是右浮动，但在C元素后面，故整体布局未受影响。

// 通过上面的分析，只要AB两者之一设置了float：right，C元素都会换行，即

// A设置float：left;，B设置float：right; 则布局为：
// A            B
// CD

// A、B都设置float：right; 则布局为：
//             BA
// CD