div中的元素是浮动导致兄弟元素没有换行

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

#ie

本文探讨了在IE浏览器中由于div元素浮动导致其后的兄弟元素未能正常换行的问题，并提出了两种解决方案：一是通过设置div的高度来修复；二是利用overflow属性进行调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

div中的元素是浮动导致兄弟元素没有换行

这里写图片描述
我说的div 指creat-box
该div后面还有一个兄弟节点span
在IE中的效果:
IE
预期结果:
预期结果
解决方法:
方法一:设置div的高度:
只设置height,不用设置line-height
方法二:
设置overflow

css圆角边框、盒子阴影、浮动、浮动的清除和综合案例学成在线
2302_77099705的博客
04-23 869
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
节点操作之兄弟节点和留言板案例
m0_72313625的博客
08-25 609
兄弟节点：nextSibling nextSibling 获取的是下一个兄弟节点 包含元素节点或者 文本节点等等 previousSibling 获得的是上一个兄弟节点，它里面包含文本节点和元素节点
css 浮动元素会导致其兄弟元素不换行的解决方案
hfhwfw161226的博客
05-15 1088
<div class="text-panel"> <!--操作栏--> <div class="action-bar"> <span class="bar-title">操作栏</span> <span class="split-line">删除</span&gt...
CSS：兄弟级浮动
兔子的博客
08-11 396
兄弟级浮动 当某一个元素浮动时 兄弟级元素为块级元素时 如果块级元素设置了宽高，则效果与平常没有差别，兄弟块级和浮动元素独占一行 如果块级元素没有设置宽高，但是兄弟块级里面有内容撑开，则兄弟块级和浮动元素依然各自独占一行 兄弟级元素为行级元素时 会出现字围现象 浮动元素和行级元素会同在一行 ...
学习布局（四）浮动的影响
qq_34579060的博客
07-24 220
文档流： 普通流，也可以称之为常规流、文档流。 普通流式文档中可显示对象在排列时所占用的位置。可以将整个网页看做一个文档，这个文档自上而下分成一行一行，并在每行中按照从左至右，依次排放元素。 脱离文档流： 设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，如果包含框内部不存在其他普通流元素，也就是产生高度为0的现象（高度塌陷），如果有其他普通元素，依...
浮动元素与兄弟之间的关系 速记 1211
pyhui的技术博客
12-11 427
标准情况 红浮蓝标 红浮蓝浮 黄盒子加入 标准流的盒子 浮动的粉色盒子来了 现象 跟随在标准流的盒子后面 不会俞越标准流 理解方式 标准流的盒子，是人界 浮动的盒子，是幽灵 当我们进行排队的时候 人，可以抢占幽灵的位置 但是 幽灵是不会占在人的位置的，幽灵惧怕人的阳气 来了一个绿盒子 标准流的 粉色盒子变成了标准流 绿色的盒子会跑到粉色盒子的后面 来了一个金色的盒子排第一个 金色的盒子是标准流 思考，后面的盒子如何排序 原则： 人可以抢幽灵的位置 幽灵一定不会抢人的位置 标准流的盒子会占据
css div浮动后，兄弟节点的文档元素会环绕浮动的div
m0_37728716的博客
04-24 640
<div> <div style="float: left;width: 50px;height: 50px;background: red;"></div> <div style="width: 100px;height: 100px;background: yellow;"> <p>text</p&g...
css float left布局换行不正常问题的解决
09-22
在上述文档中提到的案例中，本来页面布局是按照预期来进行的，但是当特定的浮动元素（如id为special的div）的高度小于其他兄弟元素时，整个布局的换行逻辑就出现了问题。 这里有两个关键点需要关注： 1. 清除浮动...
盒内元素不换行
04-25
当某些兄弟元素因浮动而影响布局时，可能会导致意外的换行现象。此时可通过清除浮动的影响来解决问题[^4]。 一种常见的方式是为父容器添加 `clearfix` 类： ```html <div class="container clearfix"> <div class...
前端中浮动的使用方法
10-10
4. **禁止浮动溢出（Overflow）**：使用 `overflow:hidden` 可防止子元素因为父元素浮动而意外显示在内容区域之外。 5. 注意事项：浮动会导致元素失去普通文档流，因此可能导致父级高度塌陷。使用 Flexbox 或 CSS ...
<div id="action">action</div> <div id="name">name</div> <div id="size">size</div> 生成css 使 这三个div在一行上显示
最新发布
07-01
如果用户没有提供容器，我们可以假设这三个div已经是兄弟元素，那么我们可以直接给它们的父元素设置样式。示例HTML结构：```html<divclass="container"><div id="action">Action</div><divid="name">Name</div><div ...
【CSS】浮动 ⑦ ( 浮动元素与兄弟容器盒子关系 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-26 566
一、浮动元素与父容器盒子关系 二、代码示例 1、浮动元素 + 浮动元素 2、普通元素 + 浮动元素 3、浮动元素 + 普通元素
08-兄弟级和父子级清除浮动
小凡子的博客
08-14 430
清除浮动常分为两种：兄弟级元素和父子级元素清除浮动 兄弟级元素清除浮动： 添加空白块级元素的方法,清除浮动前 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 清除浮动后： 父子级元素清除浮动：（三种） (1)给父级元素添加一个伪元素 ::after 因为浮动元素脱离文档流，而父元素没有设置高度，所以父元素无法被子元素撑开。 需要清除浮动 after方式为空元素的升级版，好处是不用单独加标签了。(较常用) 优点：符合闭合浮动思想，结构语义化正确 缺点：由于IE6-7不支持：
display:block 此元素将显示为块级元素，此元素前后会带有换行符
coding
12-09 2150
display:block 此元素将显示为块级元素，此元素前后会带有换行符。
父元素浮动后子元素部分换行解决办法
weixin_34185560的博客
02-17 231
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript 选取元素的兄弟节点、父节点、子节点
subsistent的博客
09-09 2708
来获取前一个兄弟节点。需要注意的是，这些属性返回的节点可能是文本节点或注释节点，而不仅仅是元素节点。这些方法可以在 JavaScript 中使用，通过操作 DOM 来选择元素的兄弟节点。属性来访问元素的下一个兄弟节点和前一个兄弟节点。例如，如果有一个元素节点。这两个属性只返回元素节点，而不包括文本节点或注释节点。如果只想选择元素节点作为兄弟节点，可以使用。来获取下一个元素节点作为兄弟节点，使用。如果元素没有父节点（比如根节点），那么。来获取前一个元素节点作为兄弟节点。来获取下一个兄弟节点，使用。
树的知识点
qq_49983256的博客
07-16 617
树的知识点
DOM（二）
m0_53644435的博客
12-02 741
一、节点基础 1.什么是节点 HTML文档可以看作是一个节点树，网页中的所有内容都是节点（node），一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。 HTML中DOM树中的所有节点均可通过JavaScript进行访问、修改、删除和创建 下面列举常见的节点类型： 元素节点，nodeType为1 属性节点，nodeType为2 文本节点，nodeType为3，文本节点包含文字、空格、换行等 二、节点层级 DOM根据.
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 3324
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
div中元素水平对齐不换行
06-07
可以使用display: inline-block来实现div中元素水平对齐不换行的效果。具体方法如下： 1. 将div的样式设置为display: flex，这样子元素就可以水平排列了。 2. 将子元素的样式设置为display: inline-block，这样子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值