非浮动元素出现在浮动元素下方的问题
发布日期:2022-02-24 01:06:58 浏览次数:6 分类:技术文章

本文共 549 字,大约阅读时间需要 1 分钟。

非浮动元素内容出现在浮动元素下方,且非浮动元素的css格式与浮动元素重叠的问题

1
2

此时就会出现非浮动元素出现在浮动元素下方!

在这里插入图片描述
注意的是
此时盒子2却没有边框?
这是因为
盒子1脱离文档流(这里是脱离,不是不占用文档空间)
盒子2上移
使盒子1和盒子2的边框重叠
又因为
浮动元素的内容占用了边框(空间),
所以非浮动元素被挤出边框。
解决很简单
若想盒子2出现在盒子1右边,在盒子2中加入<div class="one" style="float: left;">左浮动即可。
在这里插入图片描述

若想盒子2出现在盒子1下边且又有边框,在盒子2中加入<div class="one" style="clear: left;">

在这里插入图片描述

回想一下(挺搞笑)一浮动一清除,又回到原来文档流的格式。

这是因为
浮动会影响下一个非浮动元素去占用浮动元素脱离的空间,
clear属性
就是清除这一影响。
这里需要注意一个问题
浮动是脱离原来的文档流,不是不占用文档的空间。
就是这样,浮动脱离文档流,又占用文档流的空间,所以出现了非浮动元素内容出现在浮动元素下方,且非浮动元素的css格式与浮动元素重叠的问题。

转载地址:https://blog.csdn.net/weixin_45878630/article/details/110132430 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:轮播图的实质
下一篇:对象、封装、继承、多态

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年03月22日 06时39分23秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

能用别的软件吗_手机软件能用蓝牙传送吗 2019-04-21
为什么图片要2的倍数_为什么宝宝喜欢流“口水”?这种2种原因父母要知道,建议收藏... 2019-04-21
下载了XAMPP怎样打开MYSQL_xampp mysql安装启动 2019-04-21
pdo转mysql_mysql转mysqli或pdo 2019-04-21
mysql如果没有表就创建_mysql – 改变表是否存在或创建如果没有 2019-04-21
ireport连接mysql_ireport 4.5教程之数据源介绍 2019-04-21
mysql多维模型_数据仓库数据库设计方法---关系模型和多维模型比较分析 2019-04-21
局域网聊天程序 java MySQL_java 基于TCP/IP协议的局域网聊天小程序 2019-04-21
r glm 中的p值_假设检验中的P值 2019-04-21
mysql中sql语句结构_MySQL中使用sql语句获得表结构 2019-04-21
如何增加mysql主键约束_mysql修改表时怎么添加主键约束? 2019-04-21
java选择路径窗口_Java实现选择电脑路径的方法 2019-04-21
java 图像渐变_Java基础之在窗口中绘图——渐变填充(GradientApplet 1) 2019-04-21
冒泡排序面向对象java_所谓的面向对象实现的冒泡排序 2019-04-21
proto 客户端 JAVA_Kubernetes官方java客户端之五:proto基本操作 2019-04-21
java编写roguelike_RogueLike地牢生成算法Unity实现 2019-04-21
java ajax 修改数据库数据库数据库_AJAX 自学练习 无刷新提交并修改数据库数据并显... 2019-04-21
java并发编程指南博客_Java并发编程-synchronized指南 2019-04-21
java怎么中断阻塞状态_java并发编程()阻塞方法与中断方法 2019-04-21
java zlib 位运算_位运算入门:找出一个二进制数的最右端的第一个1;计算一个二进制数中1的个数;找出数组中唯一一个出现次数为奇数的数;找出数组中唯二两个出现次数为奇数的数... 2019-04-21