首先是对float属性的定义有一个整体的了解,float的定义是:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
一个元素如果设置了float属性,则会脱离当前的普通流(即文档流),漂浮在普通流之上,具体漂浮的位置边界,与该元素的包含块以及前一个块级元素的位置有关,float之后的位置根据其值是left或是right,会与包含块的左边界或者右边界对齐(浮动元素可设置其margin值),并且不会超过上一个块级元素所占的行,同样的float元素不会重叠而是像普通流那样排列。
其次是对clear属性定义的理解,clear的定义是:clear 属性规定元素的哪一侧不允许其他浮动元素。取值可取left,right,both,none,inherit。
只看定义描述的话很容易产生歧义,因此我对此定义的理解是:
1.元素的位置由html自上而下的加载,先加载的位置不会因为后面元素类型变化导致自身位置变换。
2.设置clear属性相当于,将该元素的左侧元素或者右侧元素在位置不变的情况下变成块级元素占据一行,设置成为clear的元素的位置根据其调整。
可能只有我能看懂。。。等日后加入demo就会好理解一点了。