上一个div float之后下一个div不想跟在其后面

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

#html #float

本文介绍了一种解决HTML中元素浮动导致布局错乱的方法，通过在适当的div标签中使用clear:both样式，可以有效地清除浮动影响，保持页面布局的正确性。

用clear:both解决

<div style="float"></div>
<div style="clear:both"></div>

 

前端html——float元素浮动规则
qq_41141657的博客
02-23 732
float属性脱离文档流的行为 float:left移动： 往本行的最左边跑,跑到头之后往上面一行从右往左跑; 如果浮动元素的上一行是正常元素则浮动元素不能往上跑 1.页面内容 &amp;amp;lt;div id=&amp;quot;one&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;two&a
CSS中div用float之后下面的div上来了(怕忘记写下来)
m0_63270049的博客
05-08 294
1.两个大的div，上面的大div包含了浮动的div,此时若没有下面这一行clear:both的div，第二个大div就会上来。2.所以在有浮动的大div里加入<div style="clear: both;"></div>,即可。想实现上面的div浮动到右边，但是下面的div保持不变。
什么是浮点型？什么是单精度浮点数（float）以及双精度浮点数（double）？
likuoelie的博客
10-11 1888
浮点型（Floating-Point Type）是一种计算机数据类型，用于表示带有小数部分的数字（即实数）。它通过“浮点”表示法存储数字，将一个数分为尾数（mantissa 或 significand）、指数（exponent）和符号（sign），以科学计数法形式表示（如 ( 1.234 \times 10^5 )）。浮点型适合表示非常大或非常小的数值，以及需要精确小数运算的场景，如科学计算、图形处理、机器学习等。特点动态范围。
html float不让div重叠,CSS float 的疑问 : 当给两个div都设置浮动之后,为什么它们会在同一行显示?...
weixin_30315143的博客
06-01 687
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。看例子：两个浮动的div，第三个没有浮动的div是忽略了这...
DIV CSS布局：CSS浮动float属性
sun13212715744的博客
11-01 1115
在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
CSS---div盒子模型、相对绝对位置、float浮动、清除浮动
weixin_51351637的博客
08-01 3152
类似下图现象，四个浮动的图不再占用最上面的那个div。
DIV设置 float以后使下一个DIV另起一行的方法
09-25
这就是标题中提到的问题——如何在设置了`float`的`DIV`之后，让下一个`DIV`另起一行。 在给定的描述和示例中，我们可以看到一个常见解决方案：在设置`float`的`DIV`与后续元素之间插入一个具有`clear`类的空`DIV`...
精选资源
CSS教程：div设置float后高度不自动增加
01-19
相关文章：https://www.jb51.net/css/divcss-4952.html ...额外标签法这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就
精选资源
子Div使用Float后撑开父Div的几种方法
01-21
一个Div包含了多个子Div，并且子Div使用了浮动后，父Div确不能被撑开，如下图： 部分代码如下： 复制代码代码如下: <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...
weixin_35618539的博客
05-30 2227
我有这个代码HTMLCSS.head {height:110px;position:relative;}.menu {float:left;position:absolute;bottom:0px;}.search {float:right;position:absolute;bottom:0px;}我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"...
html中加一个div样式,以HTML为基础学习DIV CSS
weixin_30298733的博客
05-31 1246
点击这里浏览本站 网页设计教程 栏目内容在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简...
前端技术——3——浮动与定位
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
02-24 5377
浮动与定位：float，position 块级标签：<div> <p> <h1-6> <ul><ol><dl> 内联标签：<a> <img> <input> <span><select><textarea> 正常文档流：将元素（标签）在进行排版布局的时候，按照从上到下，从左到右的顺序进行排版的一个布局流。如果都是内联标签，则一行最右边的标签显示长度大于当前行右边
HTML5中div布局的float属性
热门推荐
ChenYitian
04-03 2万+
今天在看div布局的时候讲到了利用float属性来实现元素的浮动，一开始搞得不是很明白，现总结如下： 无论如何，div是一种块元素，每个元素铁定会占一行，无论当前行是否已经用完了，也就是所谓的“流”的概念 例如： 1号块 2号块 3号块 4号块 样式： div#container{ background-color: grey; wid
浅谈实现两个div并列的多种方法
筱葭的博客
03-16 2万+
方法一：float #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; } 方法二：display:table-cell #parent{ width:100%; di
【float的使用】
wanyuwenrou的博客
12-06 803
在html中经常用到div进行布局，而在div布局中，float（浮动）的使用几乎是必不可少的。 float经常用作div和li的排版布局。可以使div和li并排。这里用div演示。 给这两个div加上float：left；属性 ，效果如下： 在id为b的div后面添上一个div，效果如下： ...
div盒子与浮动（float）
CDZAllier的博客
09-10 5058
盒子： 在html中所有的标签(元素)都可以看作是一个盒子 盒子的四要素：内容、内边距（padding）、盒子厚度（border）、外边距（margin） 注：1. 在使用盒子时，margin要素有一定的弊端（也就是margin塌陷）。例： <!DOCTYPE html> <html> <head> <meta charset="utf...
经验分享：CSS浮动(float,clear)通俗讲解
weixin_33714884的博客
03-27 7504
       很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。        写在前面的话：        由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。        如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...
父div 向左浮动 子div 居中_CSS - 浮动属性
weixin_34990449的博客
01-22 1333
好好学习，天天向上一、浮动定义浮动是一种非常重要的布局属性属性名：float，漂流、浮动的意思属性值：left 左浮动 、 right 右浮动作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示示例图：注：中间的间隙是设置了 margin，以便于更好的观察二、浮动的性质Ⅰ、浮动的元素脱离标准流标准文档流特点：区分行块块级元素：可以设置宽高，必须独占一行行内元素：不能设置宽高，可以并排一行浮...
一个div里包含三个div想让没有子div分别布局
最新发布
11-06
以下是几种在父 `div` 中包含三个子 `div` 的常见布局方法： ### 利用 Flexbox 布局 通过 `flexbox` 布局可以很方便地实现子元素的水平或垂直排列，并且可以轻松控制元素的对齐方式。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flexbox 三列布局</title> <style> .parent { display: flex; justify-content: space-between; /* 子元素之间均匀分布 */ } .child { width: 30%; /* 每个子元素宽度为父元素的 30% */ background-color: #ccc; height: 100px; } </style> </head> <body> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> </body> </html> ``` 在上述代码中，通过设置父元素的 `display` 属性为 `flex`，将其变为一个 `flex` 容器，然后使用 `justify-content: space-between` 让子元素在水平方向上均匀分布。 ### 浮动布局 浮动布局是一种传统的布局方式，通过设置子元素的 `float` 属性，可以让子元素在水平方向上排列。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动三列布局</title> <style> .parent { overflow: auto; /* 清除浮动 */ } .child { float: left; width: 30%; /* 每个子元素宽度为父元素的 30% */ background-color: #ccc; height: 100px; margin-right: 5%; /* 子元素之间的间距 */ } .child:last-child { margin-right: 0; /* 最后一个子元素不设置右边距 */ } </style> </head> <body> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> </body> </html> ``` 这里设置子元素的 `float` 属性为 `left`，让它们向左浮动，同时在父元素上使用 `overflow: auto` 清除浮动，防止父元素高度塌陷。 ### 绝对定位布局 使用绝对定位可以精确控制子元素的位置。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位三列布局</title> <style> .parent { position: relative; height: 100px; } .child { position: absolute; height: 100%; background-color: #ccc; } .child:nth-child(1) { left: 0; width: 20%; } .child:nth-child(2) { left: 25%; width: 50%; } .child:nth-child(3) { right: 0; width: 20%; } </style> </head> <body> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> </body> </html> ``` 此代码中，父元素设置为相对定位，子元素设置为绝对定位，通过 `left` 和 `right` 属性精确控制子元素的位置。 ### 网格布局 网格布局是一种二维布局模型，可以更灵活地控制子元素的排列和大小。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格三列布局</title> <style> .parent { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列，每列宽度相等 */ gap: 10px; /* 子元素之间的间距 */ } .child { background-color: #ccc; height: 100px; } </style> </head> <body> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> </body> </html> ``` 通过设置父元素的 `display` 属性为 `grid`，将其变为一个网格容器，使用 `grid-template-columns` 属性定义列的宽度，`gap` 属性设置子元素之间的间距。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值