文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

巧用浮动布局、解决高度塌陷实例分享|技术创作特训营第一期

面包屑导航和按钮一行两端显示面包屑或编辑栏超出宽度则自动另行显示图片实现采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。...浮动可以让一个元素脱离标准流，向左或向右移动并占据其父元素的剩余空间。浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。...高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。...overflow: hidden 是一个 CSS 属性，用于控制元素的内容是否超出其容器的边界。它可以清除浮动，但前提是浮动发生在该元素内部。...当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。

47611

【网页前端】CSS的常用布局(上)

清除浮动 4.1 准备代码 4.2 引言 4.3 概念&格式 4.4 额外标签法 (隔墙法) 4.5 单伪元素法 4.6 双伪元素法 4.7 overflow:超出隐藏法 4.8 总结 5. ...： 注意：因为从上到下执行代码，绿色方块是第一个向右浮动的，自然在最右边 3.3.5 课堂练习：两端对齐排列 准备代码： 要求的效果： 提示： 左浮动：先红后蓝 右浮动：先绿后黄...格式： clear : 属性值 ; 准备代码： 默认效果： 常见属性值：（为绿色块设置清除浮动） 注意：clear 不会清除元素自身的浮动状态，仅会清除该元素左侧或右侧的浮动效果...一般在父元素末尾添加一个空标签： div style =" clear : both" >div > 注意：一般使用块级元素 div ， p 标签也能达到对应效果 示例代码：...但会见到其他人的代码 中使用 但因为不会添加额外标签，很多美工人员用伪元素可以应对需求反复的修改，所以会见到其他人的 代码中使用 4.7 overflow:超出隐藏法 overflow

1.4K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一文掌握css常见布局float、position、flex、grid

    ，但是跟绝对定位区别的一点是，该元素边产生了浮动流，以至于其相邻的元素会向右或者想左靠近该元素，而不是跟绝对定位一样，相邻的元素会忽略该元素的所在位置，直接铺满整个空间。...脱离文档流设置了float属性的元素跟绝对定位一样，脱离了文档流，对于一个父元素中只有一个或多个有浮动属性的元素，父元素会产生塌陷效果，这时一定要留意不要有让父元素的高度自适应的想法：浮动实现横向导航目前浮动常见的用法便是配个...并且relatiive定位不会脱离文档流，我们可以看到div2原来的位置依然存在。...，通过用来我们需要将某个子元素在父元素的固定位置显示，比如实现窗口的关闭按钮这种场景。...因为div1有定位属性，所以div2的位置偏移量全是相对一div1来计算了，如果我们把div1的定位属性去掉的话，div2便没有了父级定位元素，那此时，div2是针对整个body做便宜的，如图：另外最后一点

    73510

    Float 的那些事

    举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢？...块1享有浮动，脱离文档流并且向右移动 ? 　　　　　块1向左浮动。IE8和Firefox中因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了块2，使块2从视图中消失。...而IE6和IE7中紧跟在浮动元素块1的块2也会跟着浮动。如下图 ? ? 　　2.2 浮动“塌陷” 　　　　对父元素的影响：如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。...解决方案 　　　　① 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div div> div>块1 float:left div...div> 　　　　② 在使用float元素的父元素添加overflow:hidden; 　　　　③ 使用after伪对象清除浮动 3. float与JavaScript 　　使用JavaScript

    1.3K30

    【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

    子绝父相 : 在该轮播图中 , 需要 使用绝对定位在父容器中任意摆放 , 包括左右垂直居中的按钮 , 下方的小圆点 ; 子元素需要使用绝对定位 , 那么父容器必须使用相对定位 ; /* 子绝父相..., 需要设置 overflow 属性 ; /* 超出圆角部分的内容直接隐藏 */ overflow: hidden; 代码示例 : .banner { /* 子绝父相 : 整个父容器需要设置相对定位...left: 0; /* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */ border-radius: 0 15px 15px 0; } /* 设置向右翻页按钮样式...left: 0; /* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */ border-radius: 0 15px 15px 0; } /* 设置向右翻页按钮样式...-- 向右翻页按钮 --> > <!

    3K10

    掌握 CSS 浮动的关键

    比如，将多个按钮设置为浮动，可以让它们在一行上显示，节省页面空间。 二、float 属性值 left：左浮动，元素靠上靠左排列。...同理，右浮动元素会尽可能地向右移动，直到碰到包含块的边界或者其他浮动元素。 默认值：none，即不浮动。当元素的float属性为默认值时，它会按照常规流的方式进行排列。...五、高度坍塌问题及解决方法 （一）高度坍塌的根源 常规流盒子的自动高度，在计算时，不会考虑浮动盒子。...具体做法如下： .clearfix:after { content: ""; display: table; clear: both; } 然后将这个类应用到包含浮动元素的父元素上： div...> div> 这样，:after伪元素会在父元素的内容之后插入一个新的元素，这个元素会清除浮动，从而使父元素的高度能够正确地包含浮动元素。

    51810

    第213天：12个HTML和CSS必须知道的重点难点问题

    PS：如果想要元素超出，可以设置margin属性 如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。...如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。 如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。...如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上...3.3 清除浮动的方法 方法1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...（不推荐使用） 方法三：让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。

    2.9K20

    CSS布局基础(待补充完整)

    它的规则如下： 自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行 div>独占一行div> 从左向右 这是在不使用 样式的请况之下正常排列方式...2 浮动布局 float属性，一般情况下元素默认是不浮动的，一旦添加该属性，元素就会向右或者向左浮动。看例子 这是浮动文字 div> 经过对比可以发现，在不使用浮动之前，三个盒子都按照块元素的正常文档流排列方式，并且父元素的高也随着他们的内容大小变化。...会发现几点变化： 三个盒子的块元素变为了行内元素的排列方式，按照浮动属性值自左向右 父元素的高度不在随他们变化，直接没有了高度，当然他们依然相对于父元素排列，只是没有将其撑开 这里也引入一个问题...上述例子中，虽然没有把父元素撑开，但是与它同级的兄弟元素并不会直接跑到它上面去，而是在它之下按照一下两个规则排列 2-2-1 若是浮动元素后紧跟 -> h1 ~ h6、p 这一类段落标签会自动换行

    58410

    CSS-浮动(float)

    在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{ float:属性值; } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动...浮动的元素的对齐 浮动首先创建包含块的概念（包裹）,总是找理它最近的父级元素,但是不会超出内边距的范围。...总结: 浮动的目的就是为了让多个块级元素同一行上显示。 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。...如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。 # 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。...# 清除浮动的方法 其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

    2.7K20

    前端必知必会-BFC案例剖析

    内部的 Box 会在垂直方向上一个接一个的放置 块级格式化上下文中相邻的盒子之间的垂直边距折叠 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。...（这说明 BFC 中子元素不会超出他的包含块，而position为 absolute 的元素可以超出他的包含块边界） BFC的区域不会与 float 的元素区域重叠 计算 BFC 的高度时，浮动子元素也参与计算...我们来看 BFC 特性最后一条，每个 BFC 都是独立的，不会与外界元素互相影响。...这个问题应该遇到的会比较多点，子元素浮动之后撑不开父元素的高度，这时候我们给父元素创建一个 BFC 就可以了。运用的是 BFC 特性的第5条，计算BFC的高度时，浮动子元素也会计算。...我们这里给父元素添加一个 overflow:hidden 这时候父元素的高度就会有了。 ? 其实还有其他一些由于 BFC 引发的问题，由于时间原因，这里我就不一一举例了。

    1.1K30

    CSS清除浮动

    什么是浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行。...2.若是内联元素，则会尽可能围绕浮动元素。 另外，浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷。 ?...deeppink; overflow: hidden; } 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 不推荐使用 3.使用after伪元素清除浮动

    3.2K20

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

    , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素...class="one">div> div class="two">div> div class="three">div> 显示效果 : 12、z-index...浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ; 浮动元素 和 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边距塌陷 问题 ,...; overflow 可设置的值 : visible : 子元素超出父容器的部分仍然显示 ; hidden : 子元素超出父容器的部分隐藏 ; scroll : 不管子元素是否超出父容器 , 都显示滚动条...; auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ; 效果参考 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow

    2.9K10

    CSS 浮动布局，解决清除浮动的问题

    浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行...4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸...再来看看这个怎么实现 父级盒子不给高度，子集盒子浮动，父级盒子需要清除浮动 ? 问题如下图： ? 可以从上图看出，父元素div并没有因为子元素的数量增多而增加，那么这种问题怎么处理呢？...清除浮动 ：子元素设置为浮动，父元素无法被撑开的这种情况 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐） 使用成熟的清浮动样式类...使用父级元素div增加样式 overflow:hidden 来解决清除浮动的问题 ? 很好，用overflow:hidden就可以解决了。再试试其他方法。

    3.5K30

    可视化格式模型-浮动

    浮动可以看作其中的一个图层。 浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移)，它不在常规流中，浮动框由浮动元素的框组成。...right 与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。 none 该框不浮动。 浮动细则 1....对于向右浮动的框也有类似的规则。 也就是说，浮动元素的定位受先前生成的浮动框的影响。...当一个浮动框发生在两个margin折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。 第一句好理解，说的是顶边不能超出包含块，跟左边右边不能超出一个道理。...O、A、B都是浮动元素，O、A是做浮动元素，根据宽度计算，A应该处于O的下一行。B是右浮动浮动元素。按照标准，B浮动的时候，顶边不应高于A，因此，B不会放到O的右侧显示

    1.7K100

    Day7:html和css

    Day7:html和css 如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相....清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...效果 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动 清除浮动本质 ?...both div style=”clear:both”>div> // 父级添加overflow属性方法 给父级添加： overflow为 hidden|auto|scroll 都可以实现 使用...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 鼠标样式cursor cursor

    2.6K30

    【面试题解】什么是浮动？有什么应用？有什么影响？如何清除浮动？

    浮动布局 什么是浮动布局 所谓 css 浮动就是浮动元素会脱离文档的普通流，根据 float 的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。...请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。 为什么会有浮动 因为当初设计 float 的目的是为了能实现文字能够环绕图片的排版功能。...影响了叔叔元素 因为父元素的高度塌陷了，所以叔叔元素的布局也会受到影响。 如何清除浮动 父级元素也浮动 我们给浮动元素的父元素也设置个浮动。...'; height: 0; display: block; clear: both; } 利用BFC 我们利用 BFC 的区域不会与 float 重叠；计算 BFC 的高度时...，浮动元素也參与计算的特性，使父元素成为一个 BFC，也可以清除浮动。

    95110

    CSS中的浮动和清除浮动，梳理一下！

    第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。 浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！...浮动会脱离文档 脱离文档，也就是说浮动不会影响普通元素的布局 ?...浮动会脱离文档流 从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。.../div> 结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。...浮动最初设计只是用来实现文字环绕排版的。 浮动的三个特点很重要。 脱离文档流。 向左/向右浮动直到遇到父元素或者别的浮动元素。 浮动会导致父元素高度坍塌。

    2.1K70
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券