解决因浮动而改变的div结构的问题

最新推荐文章于 2022-03-01 19:07:27 发布
最新推荐文章于 2022-03-01 19:07:27 发布
阅读量162 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44568194/article/details/88913796
版权

After： 在div里面的最后面加上一个div

它可以在元素设置浮动的时候在那个div最后面加上一个div

让他不变形

那么我们一开始先弄好一个div的结构

在这里插入图片描述

然后开始设置属性

在这里插入图片描述在这里插入图片描述

然后开始设置浮动

在这里插入图片描述

现在看边框，这个div1因为它里面两个div都设置了浮动被缩回去了

然后我们加上after这个元素

content:
“”；括号里面怎么都不写的意思就是里面的内容为空白，不往里面添加任何内容

中间的属性表示他的表现形式为块级元素

最后用clear清除浮动
在这里插入图片描述
在这里插入图片描述

大功告成

黑炭桑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js div浮动层拖拽效果特效代码
03-20
在网页设计中，浮动层（div）拖拽效果是一种常见的交互设计，用于创建可移动的元素，例如对话框、窗口或者任何需要用户手动调整位置的界面元素。这种效果通常是通过JavaScript实现的，允许用户通过鼠标点击和移动来...
DIV+CSS 清除浮动常用方法总结
12-13
为了解决这个问题，我们需要进行浮动清除（`clear`）。以下是对几种常见的浮动清除方法的详细解释： 1. **使用`clear: both`**： 当所有子元素都浮动时，可以在最后一个子元素或一个额外的空元素上应用`clear: ...
解决div浮动过后 里面元素如何浮动
lkxk的专栏
10-29 1019
只需要在浮动的div中 加入position：reative； 然后浮动
用clearfix:after消除（DIV块因内部浮动而高度收缩的问题）
zhanglir333的博客
11-25 653
遇到子元素浮动而引起父级元素不能完全撑开的状况；如下例 TEST DIV CSSBBS TEST DIV TEST DIV TEST DIV 内部的DIV因为float:left之后，就丧失了clear:both和display:block的样式，所以外部的DIV不会被撑开。 我们想让外部容器的DIV随着内部DIV增多而增加高度， 以前的处理方法是： 1.给父级元
【div居中与清除浮动影响】
qq_48015509的博客
03-01 323
div居中与清除浮动影响
当Firefox外面的div不随着里面的div变化而变化时
InterruptedException的专栏
08-05 131
当Firefox外面的div不随着里面的div变化而变化时，在大框架里面加一句overflow:hidden;如： [code="html"] .warp{margin:auto; width:800px; border:#000 solid 1px;overflow:hidden} .left_box{float:left; width:30%;height:600px; border...
DIV标签设置浮动后，对下一个DIV标签width的影响
re_raise的博客
08-20 1109
后续补充。。
html中div的浮动问题
南小瓜的专栏
04-16 4174
div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。 float是什么意思？ float是浮动，翻译成中文也是浮动意
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
10-27
JavaScript 实现 Div 浮动在网页最顶上并带关闭按钮的效果是一种常见的网页设计技巧，通常用于创建固定头部导航、通知栏或者工具提示等。这种效果使得元素始终保持在浏览器窗口的顶部，即使用户滚动页面也不会消失，...
js设置浮动div的特效
06-24
5. **动画效果**：为了增加用户体验，可以使用CSS3的过渡（`transition`）或JavaScript的动画库（如jQuery的`animate`）来平滑地改变div的位置和状态。 在实际开发中，我们还需要考虑浏览器兼容性和性能优化，例如...
div嵌套 img 空白解决方法
09-25
要解决这个问题，我们可以改变`img`元素的显示方式，将其从行内元素转换为块级元素或者行内块级元素。标题和描述中提到的方法是将`img`元素的`display`属性设置为`block`。这是因为`display:block`让`img`元素像`div...
用CSS解决hover一个div，改变另外2个div的样式
阿牛哥的博客
10-14 4690
用CSS解决hover一个div，改变另外2个div的样式 在项目中遇到这样一个问题： div1和div3有默认的css样式 背景颜色是绿色 div2有一个默认的css样式 背景颜色是红色 需求：当鼠标悬浮在div1，div2，div3上时 让当前div的背景颜色变为红色，其余背景颜色变为绿色，无鼠标悬浮时 让其展示默认效果 <style> .div1 { width: 100px; height: 100px;
尚品汇项目思维导图 根据思维导图进行复习
07-13
尚品汇项目思维导图 根据思维导图进行复习
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
Go：Go语言项目实战教程
07-14
Go：Go语言项目实战教程
反恐精英游戏CS1.6安装好后界面看不到菜单，改中文，并调整分辨率
最新发布
07-14
反恐精英游戏CS1.6安装后，很多人打开后界面是看不到菜单的，一般是因为分辨率不对，将这个.reg导入即可完成设置。 下载完成后，双击运行该文件，按照提示进行操作。在导入过程中，可能会出现警告信息，点击“是”或“确定”继续。 导入成功后，重新启动CS1.6游戏，你会发现界面已经调整为正确的分辨率，菜单也能够正常显示了。这样，你就可以愉快地享受游戏了。
DIVCSS布局：CSS浮动float属性详解.doc
06-23
本文档深入探讨了在DIV-CSS布局中CSS浮动(float)属性的使用和理解。在Web标准的网页设计中，float属性起着至关重要的作用，它允许开发人员精确控制元素的布局，尤其是在实现响应式设计和灵活的页面结构时。float属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值