浮动和定位

浮动

• 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失效；

• 点赞
• 收藏
• 分享
• • 文章举报

qq_43757976 发布了3 篇原创文章 · 获赞 0 · 访问量 9 私信 关注

标签：浮动,定位,元素,边界,float,顶端,right
来源： https://blog.csdn.net/qq_43757976/article/details/104525593