首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS负上边距不适用于上面的浮动

CSS负上边距(margin-top)不适用于上面的浮动元素。浮动元素会脱离文档流,导致其上方的元素无法感知到浮动元素的存在,从而无法应用负上边距。

浮动元素是指通过CSS的float属性将元素从正常的文档流中移动到指定位置的一种布局方式。常见的浮动值有left和right,使元素向左或向右浮动。

当一个元素浮动后,其上方的元素会忽略该浮动元素的存在,因此无法通过负上边距来影响浮动元素的位置。负上边距通常用于调整元素与其上方元素之间的垂直间距,但对于浮动元素来说,它们无法感知到上方元素的存在,因此负上边距不会对浮动元素产生影响。

解决这个问题的方法是使用其他布局技术,如清除浮动(clear float)或使用CSS的定位属性(position)来控制元素的位置。清除浮动可以通过在浮动元素下方插入一个空的块级元素,并设置clear属性为both来实现。定位属性可以使用relative、absolute或fixed来定位元素,从而不受浮动元素的影响。

总结起来,负上边距不适用于上面的浮动元素,需要使用其他布局技术来解决浮动元素对上方元素的影响。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS进阶07-浮动Floats

若干浮动会相邻,而这个模型也适用于同一行中的相邻的浮动元素。 看下例,下面的规则会使所有的 class="icon" 的 img 盒浮动到左侧(并设置左外边为 0 )。...但是在CSS2.2中,如果,在BFC中,有一个文档流内垂直高度的外边,使得浮动的位置高于它原本应当在的位置,所有这种外边被设为零,浮动的位置则未定义。...空隙阻止外边折叠并充当元素外边margin-top之上的空间。空隙被用于推动元素在垂直方向上越过浮动。... 说明:要是没有 clear ,首段和末段两个段落的边将会折叠并且末段的上边框边缘将同浮动段落的顶部齐平。如下: ? 但 clear 使得上边框边缘低于浮动,即下降2em。...注意:CSS1中该属性适用于所有元素,因此所有元素都能实现效果。在CSS2和CSS2.2中, clear 属性仅支持块级元素。因此开发者们应当只将此属性应用于块级元素。

1.5K40

你是否彻底了解margin属性?

你知道margin吗?你知道margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… Margin是什么 CSS属性定义元素周围的空间。...这个问题发生的原因是根据规范,一个盒子如果没有补白(padding-top)和上边框(border-top),那么这个盒子的上边会和其内部文档流中的第一个子元素的上边重叠。...CSS规范“Bug”,而强制在父元素使用border-top和padding-top,不舒服,也不容易记住,下次再发生这样的情况还是会忘记这条准则,而且在页面设计稿里如果不需要border-top加个上边框...如果元素是第一个元素,则就是相对于父元素的margin距离(但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边合并的知识...margin技术及其应用 在margin所有的实际应用中,margin技术是我学习css路上最重要一课之一,许多高级应用和页面上的疑难杂症都可以用margin技术来实现。

86920
  • CSSCSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    | 代码示例 ) 【CSS】使用绝对定位 / 浮动解决外边塌陷问题 ( 为父容器 / 子元素设置内边 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display..., 盒子模型的初始位置是 在浏览器的 左上角 ( 0 , 0 ) 位置 , 此时设置相对定位 , 并设置边偏移 , 使用 margin 也可以实现盒子放置在 ( 100, 100 ) 位置 , 但是无法设置其浮动在其它盒子上方...浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ; 浮动元素 和 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边塌陷 问题 ,...为 盒子设置 浮动 / 定位 , 就不用考虑 外边塌陷的问题 ; 14、使用绝对定位 / 浮动解决外边塌陷问题 在 标准流的父盒子 中 , 添加一个 标准流子盒子 ; 如果 子盒子设置 100 像素的外边..., 父盒子也会被带下来 , 这就是外边塌陷 ; 下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了 外边 , 结果将 父盒子也带下来了

    19510

    css布局 - 两栏自适应布局的几种实现方法汇总

    border-radius: 8px; overflow: hidden; } .head img{ display: block; width: 100%; } 以下的几种实现基本复用了上边的这几行...不说废话,看下实现: 具体方法实现及分析: 一、float - 浮动实现 基本我们看到这种并列排排站的布局,可能第一时间就会想到浮动。左浮动排队。...三、margin - 圣杯布局 这种写法很特别,我甚至还没研究透他的原理。是从慕课网张大神的课程中学到的。 他的特殊之处在于,这种适用于图片在右边的情况,如下图: ?...float: left; margin-right: 170px; } margin实现关键点解析 父元素清楚浮动 两列都float:left 需要自适应的文案列margin-right...等于固定宽度列的图片宽度+二者间距 有固定宽度的图片列,margin-left为自己的宽度。

    1.8K20

    全栈之前端 | 4.CSS3基础知识之盒子模型学习

    CSS 渲染绘制时屏幕盒子实际宽度和高度会加上设置的边框和内边值,所以在实现响应式布局事会非常烦人,需要时刻注意到这个元素的边框和内边。...> 指定两个值时,第一个值会应用于上边和下边的外边,第二个值应用于左边和右边。 > 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边。...,在外边设置为正时是如何推开周边元素,以及设置为时,是如何收缩空间的。...例如,当一个元素出现在另一个元素上面时,第一个元素的下外边与第二个元素的外边会发生合并。 示例,在下面的code中,两个相邻的元素之间存在20px的外边。...由于CSS外边合并的规则,这两个外边会合并为一个外边,所以实际这两个元素之间的垂直距离是20px,而不是40px。

    28920

    CSS基础(一)

    二、继承性: 所谓继承性是指书写CSS样式表时,子标签汇集成父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父标签即可。...padding-top 设置标签的内边 简写 padding属性 边框: css边框属性用来设置边框的宽度、风格和颜色。...margin属性用于设置外边。...当上下相邻的两个块元素相遇时,如果上面的元素有下外边margin-bottom,下面的元素有外边margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和,...对于嵌套关系的块元素,如果父元素没有内边以及边框,则父元素的外边会与子元素的外边发生合并,合并后的外边为两者中的较大者,即使父元素的外边为0,也会发生合并。

    92120

    CSS学习笔记二

    border-top 简写属性,用于上边框的所有属性设置到一个声明中。 border-top-color 设置元素的上边框的颜色。 border-top-style 设置元素的上边框的样式。...当一个元素包含另一个元素中时,它们的/下外边会发生合并: ? ?...CSS 定位: CSS定位,属于允许对元素进行定位 定位: 定位和浮动CSS为定位和浮动提供了一些属性,利用属性可以建立列式布局,将布局的一部分重叠。...display属性: 定位机制: CSS基本定位机制:普通流,浮动和绝对定位 除非专门单独定义,否则所有框都是默认在普通流中定位 块级框从上到下一个接一个排列,框之间的垂直距离是由框的垂直外边计算出来的...top 定义了一个定位元素的外边边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边边界与其包含块右边界之间的偏移。

    1.2K30

    CSS入门?一篇就够了!

    CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下: 在上面的样式规则中: 1.选择器用于指定CSS样式作用的HTML对象, 花括号内是对该对象设置的具体样式...表示 上下3像素 左右 5像素 3个值 padding:上边 左右边 下边 比如 padding: 3px 5px 10px; 表示 是3像素 左右是5像素 下是10像素 4个值 padding...相邻块元素垂直外边的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边margin-bottom,下面的元素有外边margin-top,则他们之间的垂直间距不是margin-bottom...解决方案: 可以为父元素定义1像素的上边框或内边。 可以为父元素添加overflow:hidden。...首先left 50% 父盒子的一半大小 然后走自己外边的一半值就可以了 margin-left。 ​

    5.2K20

    html、css总结

    解决方法: 1.最简单的就是把盒子大小写死 缺点:非自适应 2.给外部的父盒子也添加浮动 缺点:对页面的布局不是很友好,不以维护 3.给父盒子添加overflow属性 缺点: Overflow:auto...After伪类清除浮动 外部盒子的after伪元素设置clear属性 推荐使用 IE标准的盒子模型(怪异盒模型) 相当与css3属性中的box-sizing里面的content-box Width里面所指的内容是...就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件。 标签的 for 属性应当与相关元素的 id 属性相同。...Label与input共同使用可以制作出点击事件 外边塌陷又称外边合并 只有上下才会出现塌陷,左右不会 简单说就是子元素找不到父元素的border或者padding,就会与父元素上边重叠 计算方式...一正一,取两个值的和 解决方式 1.给父元素加边框 2.让父元素浮动 3.给父元素加绝对定位 4.加内边 5.转为行内块元素 6.Overflow:hidden; 7.Overflow:auto;

    1.1K20

    大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    5.4.5.1、相邻块元素垂直外边的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边margin-bottom,下面的元素有外边margin-top,则他们之间的垂直间距不是margin-bottom...5.4.5.2、 嵌套块元素垂直外边的合并 对于两个嵌套关系的块元素,如果父元素没有内边及边框,父元素的外边会与子元素的外边发生合并,合并后的外边为两者中的较大者。 ?...为了解决这个问题,大概有以下几个方案: 可以为父元素定义上边框。 可以为父元素定义内边。 可以为父元素添加overflow:hidden。...六、浮动 6.1、CSS 布局的三种机制 网页布局的核心,就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位。...浮动:让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 定位:将盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。

    1.8K20

    CSS入门指南-4:页面布局

    这是《CSS设计指南》的读书笔记,用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。...在容器内部的元素添加内边或外边。 使用CSS3的box-sizing属性切换盒子缩放方式,比如section {box-sizing:border-box;} 。...给容器内部元素应用内边和边框 把外边和内边应用到内容元素确实有效,不过这样的前提是这些元素没有明确的设定宽度,这样内容才会随内外边的增加而缩小。...这里我们使用外边实现。 用外边实现 实现三栏布局且让中栏内容区流动(不固定)的核心问题是处理右栏的定位,并在中栏内容区大小改变时控制右栏与布局的关系。...中栏aticle元素的宽度是auto,因此它仍然会力求占据浮动左栏剩余的所有空间。可是,一方面它自己的右外边在两栏外包装内为右栏腾出了空间,另一方面两栏外包装的右外边又把右栏拉到了该空间内。

    2.2K10

    css之详解

    正是因为没有很好地了解才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack 它符合正常的文档流 当使用在没有浮动的元素时并不会破坏正常的文档流。...所以付过你使用把元素向上微调的话,所有后面的元素也会向上微调。...它是相当好的兼容性 基本被所有现代的浏览器支持(IE6的大部分情况也是) 当使用了float之后,会有不同的表现 不是你平常使用的属性,所以使用的时候要格外小心。...在static元素中使用 ? 一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用之后的情况。...可以让你在不增加任何浮动和标签的情况下完成。

    1.9K80

    css之详解

    正是因为没有很好地了解才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack 它符合正常的文档流 当使用在没有浮动的元素时并不会破坏正常的文档流。...所以付过你使用把元素向上微调的话,所有后面的元素也会向上微调。...它是相当好的兼容性 基本被所有现代的浏览器支持(IE6的大部分情况也是) 当使用了float之后,会有不同的表现 不是你平常使用的属性,所以使用的时候要格外小心。...在static元素中使用 ? 一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用之后的情况。...可以让你在不增加任何浮动和标签的情况下完成。

    2.2K40

    《精通CSS》第3章 可见格式化模型

    对于包装箱,箱子的四壁就是边框,从视觉决定了箱子的大小;内边就是箱子内部的填充层,用于保护装在箱子内的物品。...浮动-文字环绕 浮动就是为了在网页实现文本环绕图片的效果而引入的一种布局模型。所以比较推荐大家只有在这一用途的时候使用。...浮动-宽度自适应.png 如果三个盒子都向右浮动,则后面两个会向右移动直到碰到自己前面的浮动盒子。如下: ?...如果包含块太窄无法容纳所有浮动元素水平排列,后面的元素会向下移动如下图左侧。如果浮动元素高度不同,后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素左侧,如下图右侧。 ?...清除浮动时,浏览器会在这个元素的上方添加足够的外边,从而将元素的上边缘垂直向下推移到浮动元素下方。如下图所示。

    1.3K20

    2018年9月9日用HTML开发网页的总结

    padding-top: 内边上边的距离 margin: auto; 居中 margin-left: 外边左边的距离 line-height:行高 background-positoin...: 背景定位的属性,有两个属性值,第一个代表左边,第二个代表上边。...只会改变盒子的位置,让盒子的位置向下移动一定的距离,不会改变盒子的大小(margin的所有属性都一样)              而pading-top会改变盒子的大小,pading-top=5px表示本身盒子上边...边框太大对下面的东西有影响吗? 怎么加箭头 MVC ORM? 如果字用span标签一直在底部无法调到上边,可以给字一个div,让字成为一个盒子。...div0的高度的话,下一个div2就会自动靠下边最左边浮动 如果div1里面的内容的高度大于div1设置的高度的话,div2的位置不会靠最左边,而是在多出内容的右下角为开头浮动,如果div设了float

    1.1K60

    CSS基础知识巩固你的前端基础

    background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为: scroll,表示可以随着页面其余部分的滚动而滚动。...css内边的属性: 属性 说明 padding-top 元素的内边 padding-right 元素的右内边 padding-bottom 元素的下内边 padding-left 元素的左内边...padding: 10px 10px 10px 10px; css外边的属性: 属性 说明 margin-top 定义元素的外边 margin-right 定义元素的右外边 margin-bottom...定义元素的下外边 margin-left 定义元素的左外边 margin 用一个声明定义所有外边属性 css边框的属性: 属性 说明 border-top-style 上边框的样式属性 border-right-style...,定位 css浮动涉及到的属性 属性 说明 float 设置框是否需要浮动以及浮动方向 clear 设置元素的哪一侧不允许出现其他浮动元素 clip 裁剪绝对定位元素,该元素必须是绝对定位,右下左原则

    2K10

    CSS学习记录及整理

    important的属性优先级会被提升): 直接选中>间接选中 不同选择器:id>类>标签>通配符>继承>浏览器默认 相同选择器,写在后面的优先级高 CSS基础语法 CSS语法组成:选择器+声明语句selector...每一条语句组成:属性+值selector {property: value} 如图: ct_css_selector.gif CSS选择器 CSS中的选择器用于选择需要添加样式的元素。...另外,:hover还可以用于选中所有的其它标签,比如div:hover,当鼠标悬停到div区域时,会产生一个效果,可以用来设置动画。...border-right--有边框,同上 border-bottom--下边框 border-left--左边框 外边 margin--设置所有外边属性,一般用于兄弟关系。...margin-bottom margin-left margin-right margin-top 内边 padding--声明所有内边属性,内边一般用于父子关系 padding-bottom padding-left

    6.9K80

    Web前端温故知新-CSS基础

    (宽高、边框样式、边等)以及版面的布局等外观显示样式。...(4)相邻块元素垂直外边的合并   当上下相邻的两个块元素相遇时,如果上面的元素有下外边margin-bottom,下面的元素有外边margin-top,则它们之间的垂直间距不是margin-botton...(5)嵌套块元素垂直外边的合并   当块级元素进行嵌套时,如果父盒子没有设置上边框和内边的话,子盒子的外边和父盒子的外边会进行合并。...合并后的外边为两者中的较大者,即使父元素的外边为0,也会发生合并。   如果希望外边不合并,那么可以为父元素定义1像素的上边框或内边。...这里以定义父元素的上边框为例,在父div元素的css样式中假如以下样式: .father { border-top:1px solid #fcc; } 六、深入浮动    6.1 浮动原理

    3.5K40

    Web前端温故知新-CSS基础

    ,能匹配页面中所有的元素,如下面的css代码,它使用通配符选择器定义css样式,清楚所有HTML标记的默认边: * { margin: 0; /* 定义外边 */ padding...(4)相邻块元素垂直外边的合并   当上下相邻的两个块元素相遇时,如果上面的元素有下外边margin-bottom,下面的元素有外边margin-top,则它们之间的垂直间距不是margin-botton...(5)嵌套块元素垂直外边的合并   当块级元素进行嵌套时,如果父盒子没有设置上边框和内边的话,子盒子的外边和父盒子的外边会进行合并。...合并后的外边为两者中的较大者,即使父元素的外边为0,也会发生合并。   如果希望外边不合并,那么可以为父元素定义1像素的上边框或内边。...这里以定义父元素的上边框为例,在父div元素的css样式中假如以下样式: .father { border-top:1px solid #fcc; } 六、深入浮动    6.1 浮动原理

    2.3K20
    领券