float,clear及overflow总结

float浮动时，脱离文档流(不脱离文本流)，但是否占据空间有两种情况：

（文档流是文档中可显示对象在排列时所占用的位置）（文本流是指html文本的显示，是相对于文字段落来说的。）

情况一：如果浮动元素后紧随的标签果是 内联 或 内联块元素，浮动占据空间。

情况二 ：浮动元素后紧随的 是 块级元素的时候，浮动不占据空间 ，像是浮动元素不存在一样(要设置更大的margin-left(图片宽度加上距离图片的距离))。

以上情况可以解释为块级元素本身会自适应占满宽度，而非块级元素不会。

 

float不完全脱离文档流，float可以脱离文档流，但不会形成元素的堆叠

文档流是文档中可显示对象在排列时所占用的位置。

脱离文档流就是改变了元素原有排列的位置, 不同的样式造成的效果是不同的

- float: left|right 使元素向左 | 右浮动至父元素的最边上或是贴到同样是浮动元素旁边。

- position: absolute 形成堆叠上下文，有层叠的效果

对clear的理解：

clear只对display为块级元素的属性值（如block、table、list-item）有效果。说“清除浮动”好像浮动不能再存在一样，下面的解释应该更好：

clear的解释是：抗击显示布局左侧或右侧的浮动（自己“前面的”元素），“我该怎么样子就怎么样，我clear为left，那么float为left的元素会把父元素撑开，我clear为right，会把float为right的元素撑开。”

 

clear设置为left后，float为left的元素都会撑开父元素的高度，但right的还是管不了。同样，设置clear为right，float为left的管不了。

同样，clear设置为right后，float为right的元素都会撑开父元素的高度。

一般情况下，为防止存在浮动元素没有撑开，会将float直接设置为both，那么所有的浮动元素都会将父元素撑开，父元素的高度就不会比子元素的高度小。

 

 

overflow：auto，当内容大于宽度或高度时，显示滚动条，不大于时不显示

overflow：scroll，无论是否大于，均显示滚动条。

使用overflow进行锚点定位时，首先是内部容器的滚动条滚动，然后是浏览器滚动条滚动（对齐到顶部）。

设置为overflow：hidden的元素也能实现滚动（锚点滚动），只是滚动条消失而已。