CSS复习中级部分（二）溢出overflow、浮动float以及清除浮动的方法、display等

最新推荐文章于 2025-12-11 18:00:04 发布
原创 最新推荐文章于 2025-12-11 18:00:04 发布 · 230 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html

一、overflow属性及它可能出现的值，内容溢出元素框时的做法
二、浮动foat属性及它的值
三、清除浮动 一般来说，可以 clear:both，或是设置clearfix类
四、布局display的值
在这里插入图片描述

清除浮动的多种方法
黑猫几绛的博客
08-28 242
在以前的文章中详细介绍过clear:both清除浮动的用法，并详细介绍了浮动元素的原理，但是解决清楚浮动问题还有其他方法： 1.给父元素添加高度 当子元素浮动之后, 就无法撑起父元素的高度，那么父元素的高度就为 0 ；那么如果我们手动为父元素添加高度，那么当子元素浮动时仍然在父元素划分的范围内，不会影响其他元素。 2.开启BFC(块级格式化上下文) - overflow的值不为默认值 over-flow的最常用功能是处理子元素溢出的时候的情况，为父元素添加该属性可实现清除浮动。假设现在...
CSS—float浮动，清除浮动的6种方式、显示模式display、定位position、元素溢出overflow
m0_74556076的博客
03-03 1215
CSS—浮动float，清除浮动的6种方式。显示模式display、定位position、元素溢出overflow。
CSSfloat属性特性和清除浮动的多种方法
巧克力很苦的小博客
03-10 729
float浮动属性 定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 ...
CSS 浮动和清除浮动方法总结
WangMin@汪末末
09-17 629
作者:WangMin 格言:努力做好自己喜欢的每一件事 优快云原创文章 博客地址 ???? WangMin 什么是浮动 float？ 标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。 div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只要
web前端-CSS(display，position，overflow和浮动float)
苏凉.py的博客
06-02 1829
display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。下面我们来看看display的属性有哪些吧。比如：b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。内联元素特点：和其他元素都在一行上；宽高只与内
css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
wgchen
04-26 2938
阅读目录CSS 布局 – Overflowoverflow: visibleoverflow: hiddenoverflow: scrolloverflow: autoverflow-x 和 overflow-y所有 CSS Overflow 属性CSS Float 浮动float 属性元素怎样浮动彼此相邻的浮动元素清除浮动 – 使用 clear什么是浮动布局浮动布局优点浮动布局缺点清除浮动的方式CSS 布局 – 水平 垂直居中对齐文本居中对齐图片居中对齐左右对齐 – 使用定位方式左右对齐 – 使用 flo
css:浮动定位（float）以及清除浮动
YangLu888
10-11 992
css的浮动定位以及清除浮动
overflow:hidden解决溢出隐藏、清除浮动、margin塌陷等问题
hst_gogogo的博客
06-07 5668
overflow的取值分别有visible（默认值，多出来的内容会显示在元素框外，内容不会被裁剪）、hidden（内容被裁剪，多出来的内容不可见）、scroll（会出现滚动条，多出来的内容显示在元素框之内）、auto（如果内容超出元素范围，会自动显示滚动条，如果没有超出则不会显示。它与scroll的区别是：scroll不管内容有没有超出容器范围都会显示滚动条，而auto则超出了才会出现滚动条）和i...
css中float，position，display，以及清除浮动的知识点
tian_xiaobai的博客
07-23 521
float：css属性， 指定一个元素应沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它；该元素从网页的正常流动（文档流）中移除，也保持部分的流动性（与绝对定位相反）。 float意味着使用块布局，在某些情况下修改display的值。 left：元素浮动在其所在的块容器左侧的关键字 right：元素浮动在其所在的块容器右侧的关键字 none：元素不浮动的关键字 ...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。本文将详细解释这三个方面。 1. **隐藏溢出** 当元素的内容超出了其指定的...
CSS浮动所差生的内容溢出问题及清除浮动的方法小结
09-24
在网页设计中，CSS的浮动（float）属性是一种强大的布局工具，它允许元素在页面上左右移动，以创建多列布局或实现其他复杂的布局效果。然而，浮动元素也会带来一些问题，尤其是当它们与自动高度的容器相结合时，可能...
CSS清除浮动方法小结
09-24
在CSS布局中，浮动元素（float）经常用于创建多列布局，但它们会带来一个问题，即父元素可能无法正确地包含其浮动子元素，导致高度塌陷。为了解决这个问题，有多种清除浮动的方法，本文将详细介绍四种常见的清除浮动...
CSS清除浮动方法总结
09-25
before`和`:after`，并设置`content: ""`、`display: block`、`clear: both`以及`height: 0`和`visibility: hidden`，可以创建两个看不见的块元素，它们会占据父级元素的底部，从而清除浮动。这种方法不会增加额外的...
grid布局之-子项放置2
最新发布
syt_1013的博客
12-11 198
* 控制子项放置顺序,默认是按照行 *//* 控制隐式网格的宽度 */
CSS 选择器
froginwe11的博客
12-07 367
CSS选择器是CSS样式规则的基础，正确使用选择器可以有效地提高网页样式设计的效率。本文介绍了CSS选择器的类型、使用方法和注意事项，希望对您有所帮助。
grid布局之-子项放置1
syt_1013的博客
12-11 865
* 第1个数字是行的起始线，第2个数字是列的起始线，第3个数字是行跨越几个格子，第4个数字是列跨越几个格子， *//* 第1个数字是行的起始线，第2个数字是列的起始线，第3个数字是行的终止线，第4个数字是列的终止线， */第二种的写法比较灵活，假如后面想把aside的列放到右边，只需要改这块。/* 速写属性 grid-row和grid-column *//* 该写法表示跨越两个格子 */grid-template速写属性。/* 在父容器中定义 *//* 速写属性 */
avue uploader图片预览拉伸变型的css处理方法
经验之谈，不做搬运工
12-10 196
摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。
vue.js 3的页面中css里的:deep()是干什么的
zlpzlpzyd的专栏
12-08 176
摘要：:deep()是Vue3特有的CSS深度选择器，用于在scoped样式中穿透子组件样式隔离。它会被Vue编译器转换为带[data-v-*]的属性选择器，处理顺序先于PostCSS。这种机制支持有选择地修改子组件内部样式，是组件库定制的重要工具。开发时使用.parent:deep(.child.item)语法，最终编译为带作用域属性的选择器，实现样式穿透的同时保持隔离特性。
html css js网页制作成品——鞠婧祎html+css 4页附源码
卡拉米
12-08 1021
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示等五个页面模块，采用主流浮动布局确保浏览器兼容性。文章详细说明了网站的文件结构、素材处理方式，并提供了HTML核心代码示例，展示了一个完整的篆刻作品展示页面。同时，作者还分享了编程学习建议，推荐初学者通过牛客网等平台进行实践练习。最后提供了获取更多前端开发资源的渠道，包括源码分享和交流学习群组。
CSS清除浮动的常用方法与闭合浮动方案详解
资源摘要信息:"CSS清除浮动的方法详解"一文系统性地探讨了在网页布局中如何有效处理由浮动（float）属性引发的布局问题，重点围绕“清除浮动”这一核心概念展开。浮动是CSS中实现多列布局、图文混排等经典效果的重要...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值