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的元素也能实现滚动(锚点滚动),只是滚动条消失而已。