浮动的并排元素，当空间不足时放到自己的行上

浮动的并排元素是指在网页布局中，将多个元素设置为浮动状态，并且水平排列在同一行上。当空间不足时，剩余的元素会被放到自己的行上。

浮动的并排元素可以通过CSS的float属性进行设置。常用的取值有left和right。当元素设置为float: left时，会向左浮动，紧邻前一个元素；当元素设置为float: right时，会向右浮动，紧邻后一个元素。

浮动的并排元素有以下特点：

空间占用：浮动元素会脱离文档流，并且不占用正常的文档空间。其他非浮动元素会自动填充浮动元素脱离的空间。
水平排列：多个浮动元素会水平排列在同一行上。如果一行空间不足以容纳所有浮动元素，超出的元素将会被放置到下一行。
文字环绕：浮动元素会使得文本环绕在其周围，文字会自动环绕浮动元素的左侧或右侧。
高度塌陷：浮动元素脱离了文档流，可能会导致父元素的高度塌陷。为了避免这种情况，可以给父元素添加clearfix清除浮动。

浮动的并排元素常见的应用场景包括：

导航栏：常见的网站导航栏通常使用水平的浮动菜单。
图片浮动：可以实现多个图片在一行内并排显示，并且让文字环绕图片。
多列布局：通过浮动可以实现多列布局，比如左边是导航栏，右边是主内容区域。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（Elastic Cloud Server）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（Cloud Object Storage）：https://cloud.tencent.com/product/cos
腾讯云容器服务（Tencent Kubernetes Engine）：https://cloud.tencent.com/product/tke
腾讯云音视频处理（Cloud Media Solution）：https://cloud.tencent.com/product/mps
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动应用托管）：https://cloud.tencent.com/product/acm
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云区块链（腾讯云区块链服务）：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：暂无相关产品介绍链接提供，可参考腾讯云在元宇宙领域的相关动态和合作项目。

注意：以上推荐的产品链接仅作为参考，具体选择产品需要根据实际需求进行评估和选择。

相关·内容

前端入门4-CSS属性样式表声明正文-CSS属性样式表

，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。...float 浏览器绘制这个网页时，按照文档流顺序，先在网页第一行左边开始处理 div1 元素，发现它的一个浮动元素，则将其抽离到另一个层面，浮动在文档流上面。...本质上也是clear:both）浮动的不足浮动虽然好用，既可以实现文字围绕的效果，又可以实现多列并排的布局，但它也存在一些不足的地方，上面说的浮动清除是其中一点，还有一些问题，如下：整个宽度可能难以计算... 这是因为多个浮动元素之间并排显示的前提的有足够的空间让这些元素并排，所以通常对于浮动元素的宽度设置是通过百分比来设置，确保多个并排的元素即使窗口发生变化仍旧可以并排布局。 ...浮动元素之后的元素设置 margin 失效非浮动元素的外边距不能用于它们和浮动元素之间来创建空间，通常我们再浮动元素之后的非浮动元素会进行浮动清除，顺便设置外边距来创建间隔空间，但这时会发现这个间隔空间失效

1.6K3 0

可视化格式模型-浮动

也就是说，如果在遇到左浮动框之前，行内框被放置到行上，剩余的行框空间足够容纳该左浮动框，那么，左浮动框就会被放置在该行上，并与该行框的顶端对齐，然后，已经在行上的行内框被相应地移动到该浮动框的右侧（右侧成了该左浮动框的另一侧...如上图中的文字环绕的例子，包含文字的行框被缩短，是包含块减去浮动元素的 margin 宽度。其中，The content两字，分别被放到了两行，因为，一行中的剩余空间无法再容纳content。...后面的浮动元素，需要紧挨着先前同向浮动元素的 margin 边进行定位，如果空间不足，则折行，放置到它之前元素的下面。例如 <!...当一个浮动框发生在两个margin折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。第一句好理解，说的是顶边不能超出包含块，跟左边右边不能超出一个道理。...后面的规则是说，当浮动框处于两个发生margin折叠的地方时，会被当作被包含在一个空的块框中，它上面和下面的margin会穿过它发生margin折叠，当它不存在。 <!

1.2K10 0

CSS&HTML面经专题——（三）CSS定位盒模型经典布局浮动布局与BFC

它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。...（2）flex-shrink：定义项目的缩小比例默认为1，如果空间不足，该项目将缩小所有项目的flex-shrink为1：当空间不足时，缩小的比例相同； flex-shrink为0：空间不足时，该项目不会缩小...； flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。...，清除浮动浮动布局简介: 当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。...另外当元素浮动了起来之后，它有着块级元素的一些性质：例如可以设置宽高等。

2K3 1

HTML+CSS高级

第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...3.2.1 浮动生来其实是为了文字环绕效果： CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。...解释：每个HTML元素默认情况会根据自己的特性（block、inline、inline-block）进行布局显示（例如block元素会从上到下独占一行的特性进行布局；内联元素从左至右显示）。...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...解释：每个HTML元素默认情况会根据自己的特性（block、inline、inline-block）进行布局显示（例如block元素会从上到下独占一行的特性进行布局；内联元素从左至右显示）。

5.8K6 1

CSS的盒子模型

3）自动换行，一行写不满，换行写。块级元素和行内元素学习的初期，你就要知道，标准文档流等级森严。...此时这个标签，和一个div无异： ● 此时这个span能够设置宽度、高度 ● 此时这个span必须霸占一行了，别人无法和他并排 ● 如果不设置宽度，将撑满父亲标准流里面限制非常多，标签的性质恶心...如果没有足够的空间，那么会靠着1号大哥。如果没有足够的空间靠着1号大哥，自己去贴左墙。 ? 右浮动： float:right; ?...第二个div中的li，去贴第一个div中最后一个li的边了。原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。清除浮动方法1：给浮动的元素的祖先元素加高度。...两个div之间，没有任何的间隙了。 3）隔墙法：在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

1.2K3 0

万字总结 CSS 布局

定位想要把一个元素从正常流中移除，或者改变其在正常文档流中的位置，可以使用CSS中的position属性。当处于正常文档流时，元素的position属性为static。...当页面滚动时，固定的元素会留在相对于视口的位置，而其他正常流中的内容则和通常一样滚动。当你想要一个固定导航栏一直停留在屏幕上时这会非常有效。...单个项目占据的主轴空间叫做「main size」，占据的交叉轴空间叫做「cross size」。 4.3 容器的属性以下6个属性设置在容器上。....item { flex-shrink: ; /* default 1 */ } 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。...如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

5.7K2 0

前端学习(13)~css学习(七)：浮动

此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。浮动想学好，一定要知道三个性质。接下来讲一讲。性质1：浮动的元素脱标脱标即脱离标准流。...性质2：浮动的元素互相贴靠我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果： ?...iv本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩浮动的补充（做网站时注意） ? 上图所示，将para1和para2设置为浮动，它们是div的儿子。...div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。...结果却看到了下面的奇怪的现象： ? 此时我们给父亲div加一个border属性，就正常了：如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。

9071 0

第五节关于浮动和清除浮动的解说，以及两个大坑不要踩

这倒也不必，我们以后开发项目的时候，基本上还是要运用一些前端框架的，我们更多的，应该是去学会如何使用一个框架，而不是自己去造轮子。当然，等你以后成为技术大牛，造一点轮子也无妨。但是现在，没必要。...没错，这个就叫做浮动布局。我现在问一下大家，你觉得，浮动布局的目的是什么？没错，就是为了让块级元素在同一行上显示，仅此而已。...刚才我们说，当一个元素设置了浮动，那么就会飘起来，脱离标准流，也就是不占位置了。那么，在它后面的元素是不是就要紧跟上来啊？...那么，在我们开发网页的时候，我们肯定不希望这样的事情发生吧，还记得我们当初采用浮动布局的目的是什么吗，是不是要让几个块级元素并排显示呀？...现在虽然并排显示了，可是后面的元素自动顶上来，是不是布局就乱了呀？所以，我们需要清楚浮动。到底什么叫做清楚浮动呢，其实很简单，一句话的事：清除浮动就是给飞出去的元素填坑，好让后面的元素不顶过来。

1.1K7 0

CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

前面说过浮动元素会影响兄弟元素的位置，具体地说就是浮动之后脱离了文档流，使得兄弟元素上移填补空缺，而这会使得它被浮动元素覆盖。...如果父元素的宽度足以包含这两个子元素的宽度之和，则子兄弟元素和子浮动元素并排。如图： image.png 如果父元素的宽度不足以包含这两个子元素的宽度之和，则子兄弟元素会出现在子浮动元素的下面。...IFC 中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。...水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。...4.1.3 GFC：当为一个元素设置 display:grid 的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition

2.5K1 0

【面试题】CSS知识点整理(附答案)

伪类伪类用于当元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，用户悬停在指定的元素时，我们可以通:hover来描述这个元素的状态。...因为，当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！ css实现宽高比[2] 3....利用伪元素：父级div定义伪类:after，我们可以写一个.clearfix 工具样式，当需要清除浮动时，就为其加上这个类 .clearfix:after { display: block; clear...+ let: 0; right: 0; top: 0; bottom: 0; margin: auto; 两列布局左边宽度固定, 右边宽度自适应左边浮动, 下个元素就会独占位置,并排一行 left...元素浮动， right元素设置 width: 100%; padding-left:left元素的宽度; 右边宽度固定, 左边宽度自适应左右都浮动,左边自适应元素设置外层div 100%宽度, 这样就会独占一行

1.6K4 0

CSS弹性布局（Flex）详解

再配合,,几乎可以完全任何页面布局但是元素浮动后, 为了防止对它后面的同级元素产生影响, 就必须清除浮动clear 另外, 当元素之间具有层级关系时, 子元素的浮动会导致父元素失去高度...就是针对浮动布局的所有痛点而生, 元素浮动的后遗症全部解决所以在Flex容器中, 不能,也没必要更使用float属性,没了浮动当然也不再需要clear Flex有自己的元素垂直对齐解决方案, 所以vertical-align...: 序号属性描述 1 flex-direction 主轴方向(即项目排列方向) 2 flex-wrap 当多个项目在一行排列不下时,如何换行 3 flex-flow flex-direction,flex-wrap...align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐 align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式...每个盒子所在比例可以各不相同, 属性值必须是数值,整数小数都可以如果盒子中存在有宽度的项目, 那么剩余空间应该减去它们 3. flex-shrink 设置了项目的缩小比例,默认为1, 即空间不足时,

1.2K3 1

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

inline img 是一个标准的行内元素。你可以把两个标签写在两行，但这并不影响图片再浏览器中的显示效果，它们会并列出现在一行上。而且标签直接的空白（标记中的两个 ?...标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上。而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略。...最明显的一个例外是table元素，它有自己特殊的display属性值。这里有一份详细的列表。块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，每个元素分别占一行。...而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。...中栏aticle元素的宽度是auto，因此它仍然会力求占据浮动左栏剩余的所有空间。可是，一方面它自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右外边距又把右栏拉到了该空间内。

2.2K1 0

前端基础篇之CSS世界

内联元素又叫行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。...`clear`的作用和不足大家都知道clear: both可以清除前面浮动元素的浮动，但实际上，他并不是真的清除了浮动。 clear的定义是：元素盒子的边不能与前面的浮动元素相邻。...特性 5 BFC计算高度时包含浮动元素的高度。可以利用BFC此特性解决浮动元素高度坍塌的问题。特性 6 ：利用特性6实现自适应两栏布局。此时main宽度是自适应的。 ?...同样的，设置了固定宽高的元素，如果margin: auto，则margin平分剩余空间导致垂直水平居中： ? 层叠规则层叠规则是指当网页中的元素发生层叠时侯的遵循的规则。...除了实现文字的两端对齐，还能用来做一些两端对齐的布局。（注意下面例子自己测试时需要保证每行三个方块！！！）下面介绍个两端对齐布局的实例：地址 ?

2.1K5 0

CSS清除浮动

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。...如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： ?...一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要视乎这些兄弟元素是块级元素还是内联元素： 1.若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行...，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行。

2.3K2 0

CSS进阶内容—浮动和定位详解

网页布局的本质就是用CSS控制盒子的摆放来形成页面 CSS提供了三种流派来控制盒子：普通流浮动定位所谓普通流就是我们前面所学习的内容：标签按照规定好的默认方式排序块级元素独占一行行级元素顺序排列...我们使用浮动当然是因为一些要求我们的标准流无法完成我们使用浮动最常见的应用场景就是将多个块级元素div等并排放置（纵向排列标准流，横向排列找浮动）初见浮动那么我们来介绍一下浮动：浮动的目的是创建浮动框...，并且紧贴在一起（若当前页面不能完全显示，则另起一行）浮动元素具有行内块元素的特性（有宽高，同一行，当不具备宽高时长度与内容一致）浮动常用方法浮动元素经常与标准流父级搭配使用：我们先采用标准流父级控制纵向框架...再用浮动元素的子盒子控制这一框架内的布局简单案例我们通过一个简单案例展示浮动和标准流搭配产生的布局效果：案例：我们通过一个大盒子装有两个小盒子，使两个小盒子左浮动并排排序（中间没有间隙）图片展示效果...：浮动和标准流父亲搭配一个元素浮动了，理论上其他兄弟元素也应该浮动浮动的盒子只会影响后面的标准流盒子（即一个盒子浮动后，对前面标准流盒子不做影响，但后面的标准流盒子会压住浮动盒子，所以只对后面标准流盒子做影响

2.2K1 0

CSS进阶07-浮动Floats

左浮动盒的右外边缘不可在其旁边的右浮动盒的左外边缘之右。右浮动元素亦是。浮动盒的上外边缘不可高于其包含块的顶部。当浮动出现两个折叠外边距之间时，浮动会如同它有一个参与标准流的空匿名父块一样来定位。...该父块的位置由关于外边距折叠那章的规则定义。浮动盒的上外边缘不可高于源文档中此前元素生成的块盒或浮动盒的上外边缘。元素的浮动盒的上外边缘不可高于源文档中此前元素生成的盒所在的行盒的顶部。...空隙阻止外边距折叠并充当元素上外边距margin-top之上的空间。空隙被用于推动元素在垂直方向上越过浮动。...3em = -1em 当 clear 设在浮动元素上时，将造成第3节所述浮动定位规则的修正。...补充第10条额外规定如下：（当 clear 设在浮动元素上时，）浮动的上外边缘top outer edge必须低于所有此前左浮动盒的下外边缘bottom outer edge（ clear: left

1.5K4 0

CSS基础布局

* float元素会从父级元素的空间中消失 * 父级元素可能会高度坍陷解决思路： 1. float元素进行设置float时，float...如何清除浮动，为什么清除浮动这是因为 float元素不会占据父元素的布局空间，有可能 float元素就会超出父元素，从而对其它的元素造成影响。...清除方式： * 让盒子负责自己的布局(overflow:hidden(auto)) 设置超出时要怎么办，那么就会管理什么时候会超出 * ::after...，而是加一个伪元素放到浮动元素的后面，从而让父元素包含浮动元素。...* 设计上：隐藏(不需要在移动端显示的，就不让在移动端显示) 折行(在pc端横排的东西，在移动端可以少排一些或者竖排) 自适应(留下自适应的空间)

2.9K2 0

CSS

1,我们还得有个知识点，当后代没有自己的选择器，会继承父级的样式中的某些属性，比如 div{ color: blue; } ...h1-h6 　　2，行内元素 display：inline 一行上可以显示多个，不能设置有效的宽高，其宽高依赖于内容，代表span，strong，em 　　3，行内块级元素 display：inline-block...值可为数字加单位px，当为宽或高的一半时，就为圆形，值还可以为百分数，当为50%时，也为一个圆。...也可以为margin和padding的某一条边单独设置top，bottom，left，right margin-top：2px 　　十三、float浮动属性 float可以让块级标签并排在一行，但如果设定了...float，浮动框就不在文档的普通流，比如在一个div1里并排放了两个div浮动框，由于浮动框脱离了文本，导致原先的大div1没有了内容，若此时在div1下面加一个div2，给div2加内容，由于div

1.5K1 1

CSS中各种布局的背后(*FC)

行盒(Line boxes)：行盒由行内格式化上下文(IFC)产生的盒，用于表示一行。在块盒里面，行盒从块盒一边排版到另一边。当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。...应用场景闭合浮动：浮动区域不叠加到BFC区域上防止与浮动元素重叠防止margin collapse float 元素高度塌陷 ......能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。...item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

2.2K5 0

一步步实现静态页面布局

，而wrap是这个班级的编号，而一个页面中多次使用班级编号就好比多个人在报备自己的班级一样。...: 0 auto; } HTML5学堂上周我们讲解了HTML标签，了解到块元素标签在页面中是默认一行展示的，倘若这时候我的页面中需要几个块元素标签并排放置...，展示在同一行上，我们要怎么办？...三、浮动 1 什么是浮动 float中文就是指浮动，浮动通常是用在浮动布局上，我们通过CSS定义float让HMTL元素向左或者向右（靠）浮动。...2 为什么要浮动每个div的特点处于同一行，而布局时常常需要将块并排进行布局，那么此时我们要实现模块并排的布局所以需要浮动。 3 浮动原理我们就把页面中的一块区域比作水槽。

1.9K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云