浮动和定位
浮动
- align中的left,right属性。在html 2.0的扩展中有“可以把这些对齐方式看作是全新的浮动图像类型。”
- float
1.值:left | right | none(默认值) | inherit;
2.无继承性,应用于所有元素。
- 注意的点:
1.会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。
2、一个元素浮动时,其他内容会“环绕”该元素。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
3、浮动元素周围的外边距不会合并。(注释:margin会相加)
4、记得要设置浮动元素的宽度,否则可能最后出现的结果是宽度只有浏览器的最小width值。
5、浮动元素会生成一个块级框;不管本身是什么。
6、浮动元素会延伸,从而包含其所有后代浮动元素。
- float:none; (很少使用,目的是防止元素浮动);float:指定一个盒子(元素)是否可以浮动。
包含块的概念:距离浮动元素最近的祖先级块级元素。
规则
1、浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界。
2、浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界(不懂),除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
3、左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。
4、一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。(不懂)
5、浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
6、如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
7、左(右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的右边界的右边。(简而言之,意思是不能超过包含块。)
8、浮动元素必须尽可能高的放置。
9、左浮动元素必须向左尽可能远。
需要注意的是,规则里面没有规定下边界,这是一个故意的遗漏。
负外边距
注意:
1、当行内框与一个浮动元素重叠时,其边框,背景,和内容都在该浮动元素“之上”显示。
2、块框与一个浮动元素重叠时,其边框和背景都在浮动元素“之下”,而内容在浮动元素“之上”显示。
清除
clear:both指定元素两侧不能出现浮动元素。 属性值:left,right ,none等等
定位
自己整理哒static:无特殊定位,对象遵循HTML定位规则;
relative: 对象不可层叠;
absolute: 绝对定位与float浮动不能同时使用;设置了position:absolute 后,会将width变为auto;
两者同时使用:
1、元素同时应用position:relative;和float
先浮动到相应的位置,再根据(top/left/bottom/right)所设置的距离来发生偏移。
2、元素同时应用position:absolute 和float属性,则float失效;