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

当包装在另一个div中时,div不会彼此相邻浮动?

当包装在另一个div中时,div不会彼此相邻浮动是因为浮动元素会脱离正常的文档流,不再占据原有位置,而是向左或向右浮动到其容器的边缘。当一个div包含浮动元素时,它的高度将不再自动调整以适应浮动元素的高度,导致包含div的高度变为0,从而使得其他div无法与其相邻。

解决这个问题的方法是使用清除浮动(clear float)的技术。常见的清除浮动的方法有以下几种:

  1. 使用clear属性:在包含浮动元素的div后面添加一个空的div,并设置其clear属性为both。例如:
代码语言:txt
复制
<div style="clear:both;"></div>

这样可以清除前面的浮动元素对后面元素的影响。

  1. 使用clearfix类:在包含浮动元素的div上添加一个clearfix类,并在CSS中定义clearfix类的样式。例如:
代码语言:txt
复制
<div class="clearfix"></div>
代码语言:txt
复制
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

这样可以通过伪元素在div的末尾插入一个空的块级元素,并设置其clear属性为both,从而清除浮动。

  1. 使用overflow属性:在包含浮动元素的div上设置overflow属性为auto或hidden。例如:
代码语言:txt
复制
<div style="overflow:auto;"></div>

这样可以创建一个新的块级格式化上下文,使得div能够包含浮动元素。

以上是常见的清除浮动的方法,根据具体情况选择适合的方法即可。在实际开发中,可以根据需要使用CSS框架或库中提供的清除浮动的类或方法,例如Bootstrap中的clearfix类。

关于腾讯云相关产品,腾讯云提供了丰富的云计算服务和解决方案,包括云服务器、云数据库、云存储、人工智能、物联网等。具体推荐的产品和产品介绍链接地址可以参考腾讯云官方网站的相关页面。

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

相关·内容

【说站】css浮动元素的规则介绍

css浮动元素的规则介绍 说明 1、浮动元素浮动,其margin不会超过包含块的padding。 如果想要超过元素,可以设置margin属性。...如果两个元素一个向左浮动另一个向右浮动,左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。 2、若有多个浮动元素,浮动元素将按顺序排列而不重叠。...后面的元素高度不会超过前面的元素,也不会超过包含块。 3、如果非浮动元素和浮动元素同时存在,非浮动元素在前面。 浮动元素不会高于非浮动元素。浮动元素会尽可能对齐顶部、左右。 实例 <!...150px;             height: 150px;             background: blue;         }      以上就是css浮动元素的规则介绍,希望对大家有所帮助。

52620

理解 Css 布局和 BFC

BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例,假设有一个背景颜色为灰色的 div。这个 div 包含两个标签 p。...折叠的结果按照如下规则计算: 两个相邻的外边距都是正数,折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数,折叠结果是两者绝对值的较大值。...产生折叠的必备条件 再一次,BFC 的工作是把东西装在盒子里,防止它们从盒子里跑出来。 BFC 可以阻止元素被浮动元素覆盖 你将熟悉 BFC 的这种行为,因为使用浮动的任何列类型布局都是这样工作的。...将包裹文本的div设置为BFC 这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC,因此,如果右边的列比左边的列高,那么我们的列就不会相互环绕。...最安全的做法应该是创建一个 BFC 不会带来任何副作用,它内部的元素都安全的呆在这个迷你布局,这种方法不会引起任何意想不到的问题,也可以理解开发者的意图。

1.4K00

理解 CSS 布局和 BFC

BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例,假设有一个背景颜色为灰色的 div。 这个 div 包含两个标签 p。...折叠的结果按照如下规则计算: 两个相邻的外边距都是正数,折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数,折叠结果是两者绝对值的较大值。...查看演示 再一次,BFC 的工作是把东西装在盒子里,防止它们从盒子里跑出来。 BFC 可以阻止元素被浮动元素覆盖 你将熟悉 BFC 的这种行为,因为使用浮动的任何列类型布局都是这样工作的。... I am text 带有 float 类的项被向左浮动,因此 div 的文本在它环绕 float 之后。 ?...最安全的做法应该是创建一个 BFC 不会带来任何副作用,它内部的元素都安全的呆在这个迷你布局,这种方法不会引起任何意想不到的问题,也可以理解开发者的意图。

1.1K00

CSS

Float(浮动),往往是用于图像,但它在布局一样非常有用。 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。...一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...如果图像是右浮动,下面的文本流将环绕在它左边: ? 如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。 在这里,我们对图片廊使用 float 属性: ?...元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本添加图片廊: ? ?...static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流。 静态定位的元素不会受到 top, bottom, left, right影响。

1.4K60

BFC(块级格式化上下文)与常见布局方案

普通流 (normal flow) 在普通流,元素按照其在 HTML 的先后位置至上而下布局,在这个过程,行内元素水平排列,直到行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定...浮动 (float) 在浮动布局,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版的文本环绕相似。...4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响,外面的也不受BFC区域里面的影响(这个挺重要的,设置的浮动的元素,脱离了文档流,正常的相邻的元素会跑到它下面(靠左)。...5.计算BFC的高度浮动元素也参与计算(就是子元素设置浮动,脱离文档流,父元素高度塌陷,给父元素设置BFC,那么父元素高度就不会忽略浮动的子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流的元素...折叠的结果按照如下规则计算: 1、两个相邻的外边距都是正数,折叠结果是它们两者之间较大的值。 2、两个相邻的外边距都是负数,折叠结果是两者绝对值的较大值。

53730

脱离文档流分析(转)

问题2:元素浮动造成的两个div覆盖或相互重叠如何解决。 (1)、左右结构div盒子重叠现象,一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...如上面的例1:相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上,但内容不会照成覆盖现象,只有DIV形成覆盖现象。      ...务必记住这句话:“float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!”...例如:下图例3 box1向右侧浮动,box2不设置clear属性的示意图;例4box1向右侧浮动,box2设置clear:right,表示右侧不允许出现浮动元素,则box2自动下移一行。 ?...注意,即使不设置值同样起到了相对定位作用,其子孙级别标签使用position:absolute;同样会起到定位效果,position:relative的另一个主要用法:方便绝对定位元素找到参照物。

1.3K20

css面试点二:BFC(块级格式化上下文)+常见布局方案

三种常见的布局方案方案: 普通流 (normal flow) 在普通流,元素按照其在 HTML 的先后位置至上而下布局,在这个过程,行内元素水平排列,直到行被占满然后换行,块级元素则会被渲染为完整的一个新行...属于同一个BFC两个相邻Box的margin会发生重叠(正常的不设置浮动,两个块元素 margin重叠,仅仅是垂直方向,左右不是这个样子的),会发生外边距合并,指的是两个垂直外边距相遇,它们将形成一个外边距...4.BFC的区域不会与float盒子重叠。BFC区域的子元素不受外面的影响,外面的也不受BFC区域里面的影响(这个挺重要的,设置的浮动的元素,脱离了文档流,正常的相邻的元素会跑到它下面(靠左)。...5.计算BFC的高度浮动元素也参与计算(就是子元素设置浮动,脱离文档流,父元素高度塌陷,给父元素设置BFC,那么父元素高度就不会忽略浮动的子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流的元素...外边距折叠(外边距合并)的计算方式 1、两个相邻的外边距都是正数,折叠结果是它们两者之间较大的值。 2、两个相邻的外边距都是负数,折叠结果是两者绝对值的较大值。

49020

CSS重要的BFC概念

(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界) BFC的区域不会与float的元素区域重叠 计算BFC的高度浮动子元素也参与计算 5....所以两个相邻块级子元素分属于不同的BFC可以阻止margin重叠。...这里给任一个相邻块级盒子的外面包一个div,通过改变此div的属性使两个原盒子分属于两个不同的BFC,以此来阻止margin重叠。...使用BFC阻止margin合并 但是这里有个疑问: 如果外面包一层div,设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。...而如果在外面不一个div的话,设置display为inline-block、inline-flex、table-captain,和position为absolute、fixed,float为left

1.4K11

理解CSS布局和块格式化上下文

[image.png] 在进行html布局及css编写的时候,你是否遇到过这样的问题: 子元素设置浮动脱离文档流后,父元素无法将其完全包裹 子元素浮动实现两栏布局另一个子元素与浮动子元素重叠 垂直方向的外边距...BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,并且容器元素不会影响兄弟元素的布局。...,文本足够长,会看到如下效果,父元素可以完全包裹子元素。...[image] 但事实上,float的文字已经脱离文档,如果文档流文字过少,浮动元素就会溢出父元素边缘。....outer { overflow: auto; } [enter image description here] BFC防止垂直外边距重叠 外边距折叠的规则是:两个块级元素相邻并且在同一个块级格式化上下文

2.1K30

css面试点三:清除浮动的九方法-高度塌陷理解-伪元素使用

浮动的定义 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻浮动元素停了下来。 浮动的框可以左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。...浮动框不属于文档流的普通流,元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局 包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”。 为什么要清除浮动?...清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题。 父元素不给高度的时候,内部元素不浮动时会撑开,而浮动的时候,父元素变成一条线。...只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样,会产生问题 建议:不推荐使用,只建议高度固定的布局使用 <div class="left...定义overflow:auto 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto,浏览器会自动检查浮动区域的高度 缺点:内部宽高超过父级div,会出现滚动条

93520

59道CSS面试题(附答案)

不同点是float仍可占据位置,不会覆盖在另一个BFC区域上,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止, absolute会覆盖文档流的其他元素,即遮盖现象。...例如都是块级元素,显示这些元素中间的文本,都将从新行开始显示,其后的内容也将在新行显示。 行内元素可以和其他行内元素位于同一行,在浏览器显示不会换行。...有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素遮盖。定位内联元素,要考虑浮动元素的边界,围绕浮动元素放置内联元素。...IFC是不可能有块级元素的,插入块级元素(如在p插入div),会产生两个匿名块,两者与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。...(1)两个相邻的外边距都是正数,折叠的结果是它们两者较大的值 (2)两个相邻的外边距都是负数,折叠的结果是两者绝对值较大的值。 (3)两个外边距一正一负,折叠的结果是两者相加的和。

4.9K50

块格式化上下文(BFC)布局规则及常见情景

BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度浮动元素也参与计算。....main { overflow: hidden; } 触发main生成BFC后,这个新的BFC不会浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。...根据BFC布局规则第六条: 计算BFC的高度浮动元素也参与计算 为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度,par内部的浮动元素child也会参与计算。...因为BFC内部的元素和外部的元素绝对不会互相影响,因此, BFC外部存在浮动,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。...同样的,BFC内部有浮动,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

1.6K40

由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

在一个BFC,两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC相邻的块级元素的垂直边距会折叠(collapse)。...折叠的结果: 两个相邻的外边距都是正数,折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数,折叠结果是两者绝对值的较大值。 两个外边距一正一负,折叠结果是两者的相加的和。...1 .main { 2 overflow: hidden; 3 } 触发main生成BFC后,这个新的BFC不会浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。...因为BFC内部的元素和外部的元素绝对不会互相影响,因此,BFC外部存在浮动,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。...同样的,BFC内部有浮动,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

1.1K50

外边距合并规则

相邻的垂直外边距会合并,除了2种特殊情况: 根元素盒的外边距不合并 如果一个带有间隙的元素的上外边距与下外边距相邻,它的外边距会和紧挨着的兄弟(元素)的相邻外边距合并,但合并后不会再和父级块的下外边距合并...从常规流脱离出去,根据其包含块确定自身位置 元素既没有浮动(float属性的应用值为none),也没有绝对定位(position属性的应用值不为absolute),并且不是根元素,那就按常规流来布局,...’visible’的块盒(该值已被传播到视口除外)会为其内容建立新的块格式化上下文 在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。...根据外边距合并的发生条件,有8条推论: 浮动的盒与任何其它盒之间的外边距不会合并(甚至一个浮动盒与它的流内子级之间也不会) 建立了新的块格式化上下文的元素(例如,浮动盒与’overflow’不为’visible...两个margin正值取最大值,两个负值取绝对值的最大值 对于递归特性,“相邻”的定义扩展出一条递归公式: 折叠外边距也能与另一个外边距相邻,只要其外边距的任意一部分与那个外边距相邻就算 贪婪与外边距合并结果计算方式有关

1.3K30

BFC背后的神奇原理

计算BFC的高度浮动元素也参与计算 二、哪些元素会生成BFC?....main { overflow: hidden; }  触发main生成BFC后,这个新的BFC不会浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。...因为BFC内部的元素和外部的元素绝对不会互相影响,因此, BFC外部存在浮动,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。...同样的,BFC内部有浮动,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 原文

77010

CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】

一、流动布局 流动布局有3种布局模型,分别是流动布局(常规默认)、定位布局(relative)以及浮动布局,其中所述的流动布局、定位布局已在第一点讲解,接下来咱们查看浮动布局。...1.1浮动布局 浮动布局的属性为 float,其值可以是 float 或 right,设置浮动布局后将会影响左右相邻元素,并且会脱离文档流但却受文档流影响。...,浮动为左浮动;接着查看 body 的 html 内容,首先是一个常规的 div,接着是两个使用了 float 样式的 div,其中一个背景色为绿色,使用 margin-top 表示距离顶部的距离为...10px(此处用于查看接下来的一个知识点),结果如下: 此时我们可以看到,其 div 没有改变其元素类型但依旧会显示于一行,这是因为此时设置了浮动,该浮动div 将会影响其左右相邻 div... 以上代码创建了两个样式,一个是 flex 另一个是 box,当然 flex 暂时并未设置弹性布局,在此留着备用,接下来的 box 设置了基础的宽高

76020

清除过的浮动

浮动框不属于文档的普通流,一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档的普通流就会表现得和浮动框不存在一样,浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素...BFC的特性: 1)块级格式化上下文会阻止外边距叠加 两个相邻的块框在同一个块级格式化上下文中,它们之间垂直方向的外边距会发生叠加。...换句话说,如果这两个相邻的块框不属于同一个块级格式化上下文,那么它们的外边距就不会叠加。 2)块级格式化上下文不会重叠浮动元素 根据规定,一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。...由于这个原因,给一个挨着浮动的块级格式化上下文添加负的外边距将会不起作用(Webkit和IE6在这点上有一个问题——可以看这个测试用例)。 ...:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC任然属于文档的普通流。

84320

了解BFC特性,轻松实现自适应布局

2、BFC包含浮动元素,浮动会触发新的BFC产生 3、已经确定的BFC区域不会相邻BFC的浮动元素边距发生重合 针对以上几点我们来具体深究一下BFC的特性到底有何区别,在什么样的场景下会比较触发BFC...从新的结构我们可以知晓,相邻块级元素的BFC会使边距发生合并,以前的内部的BFC是123,现在新的BFC是143,2已经被4裹独立出来了,在2内部的margin会作用到父级,从而作用到父级相邻的BFC...BFC边距发生重合 当我们把inner-box-2设置为浮动后,边距就不会合并了。...这也证实了相邻BFC与已经设置的浮动元素边距并不会合并,但inner-box-2与inner-box-1始终在一个大的BFC包裹着,而每一个自身元素又形成一个独立的BFC。...貌似456间元素因为设置浮动破坏了BFC,所以我们需要给456设置特殊margin才行,于是乎你给456加一层div,然后设置margin: -10px 0并且要设置左浮动 .item-2 {

63850

什么是BFC?看这一篇就够了

即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度浮动元素也参与计算。...class="left">LEFT RIGHT 页面: 又因为: BFC的区域不会与... 页面: 这个时候我们根据最后一条: 计算BFC的高度浮动元素也参与计算。...因为BFC内部的元素和外部的元素绝对不会互相影响,因此, BFC外部存在浮动,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。...同样的,BFC内部有浮动,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

57420

网页布局基础

由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘,会自动换行)和行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。...浮动的框可以左右移动(根据float属性值而定),直到它的外边缘 碰到包含框或者另一个浮动元素的框的边缘。 浮动元素不在文档的普通流,文档的普通流的元素表现的就像浮动元素不存在一样。...元素没有设置宽度值,而设置了浮动属性,元素的宽度会随内容的变化而变化(若没有内容,则宽度为0)。 元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻它后面的元素,对它前面的元素没影响。...Paste_Image.png 浮动元素覆盖了紧邻它后面的元素,而不会覆盖前面的。...一个元素设置绝对定位,没有设置宽度,元素的宽度根据内容进行调节。

1.8K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券