浮动和定位

简介: 浮动和定位

浮动

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

相关文章
|
14天前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
14天前
|
编解码 前端开发
浮动布局
【10月更文挑战第27天】浮动布局在实现多列布局和图文混排等方面具有一定的优势,但也存在高度塌陷和定位控制等缺点。通过合理地选择清除浮动的方式,可以有效地解决浮动布局带来的问题,确保页面布局的稳定和正确显示。
|
14天前
|
前端开发
|
3月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
3月前
|
前端开发 UED 容器
深入理解定位布局:绝对定位与相对定位
深入理解定位布局:绝对定位与相对定位
|
6月前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
6月前
指定文字浮动区域,动起来的效果棒极了
指定文字浮动区域,动起来的效果棒极了
82 0
定位绝对定位相对定位固定定位
定位绝对定位相对定位固定定位
68 0
定位绝对定位相对定位固定定位