非浮动元素出现在浮动元素下方的问题
发布日期:2022-02-24 01:06:58
浏览次数:6
分类:技术文章
本文共 549 字,大约阅读时间需要 1 分钟。
非浮动元素内容出现在浮动元素下方,且非浮动元素的css格式与浮动元素重叠的问题
12
此时就会出现非浮动元素出现在浮动元素下方!
注意的是 此时盒子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_所谓的面向对象实现的冒泡排序
2019-04-21
java编写roguelike_RogueLike地牢生成算法Unity实现
2019-04-21
java并发编程指南博客_Java并发编程-synchronized指南
2019-04-21
java怎么中断阻塞状态_java并发编程()阻塞方法与中断方法
2019-04-21