html两个div浮动后下一个div怎么换行的问题

欢迎访问我的个人博客：机器学习之路

刚开始学习网页前端，不懂得问题挺多，总在网上查找相关知识点，但是东西一旦多了就特别难记全了，今天又查东西突然发现别人都是查完以后把东西写一遍文章记下来方便自己也方便后来的新人所以写了这篇稿子，当然大多数都还是从网上跟一些前辈学的，算不上原创，只能说是总结一下自己要用的和前辈留下的一些知识，方便把这些知识为我所用。

以下内容如有冒犯哪位前辈或者原创，还请多多包涵，也可以联系我删除，绝对尊重原创，谢谢；
好了，废话不多说，下面进入正题：

今天做一个网页用到两个div需要并列在同一行内，于是给两个个div添加float：left；属性，但是问题又来了，紧接着的第三个div也并列到同一行的右边，

百度以后发现HTML里有div标准流这个说法，也就是说div在默认状态下是独占一行的，但是当给div标签加上float属性以后，

这个div就脱离标准流，也就是说它不再独占一行，当然这个标准流跟我们现在讨论的问题没什么关系，但是要知道这个知识点，

接下来，如果只想让这两个div并列在同一行内，那么就需要给第三个div换行，下面重点来了：

要给第三个div换行只需要给它加上一个clear：both属性即可；

没添加clear：both之前如下：

添加clear：both之后如下：

下面说一下clear：both的意思：

字面意思叫清除浮动效果，

实际上呢

对div1和div2都声明了浮动向左，那么这个时候div1之前是没有其他浮动元素的，而相对div3，
由于它之前的div1和div2都声明向左浮动，也就给div3留出了一部分空间，
那么由于div1和div2都声明的向左浮动，div3默认会自动补全，
这个时候再对div3声明clear:both就会起作用，它就跑到下面去了。

另外，如果是table需要换行，因为table是没有clear属性的，所以可以给table外面套一个div再给div加clear属性，或者在table前面加一个空的带clear属性的div。

html两个div浮动后下一个div怎么换行的问题相关推荐

div设置float后下一个div要换行的解决办法
div设置float之后,如果没有清除,则下一个被设置float的div会根据上一个float的div的布局进行排版:而下一个没设置float属性的div则是根据它的前一个元素进行排版. 要清除flo ...
div浮动到另一个div上面或者浮动到img图片上面
让一个层叠加在另一个层上的话,你可以利用相对定位和绝对定位来实现比如: 你在父元素上设置position:relative; 在子元素上设置position:absolute;top:10px;le ...
如何让一个DIV浮动在另一个DIV上面
直接上DEMO了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
工业App能否成为继Android和iOS后下一个App开发者的春天？
为什么需要工业互联网平台? 只要会Java或者C或者HTML5就可以开发手机上的App,但是工业App跟手机App不一样,需要跟设备打交道,需要听懂设备.读懂设备. 传统工业应用软件往往开发难度大.开 ...
html 让其中一个div浮在另一个div上面
html 让其中一个div浮在另一个div上面通常情况下,有两种实现方法:(1) 浮动的元素设置float属性 (2) 浮动的元素设置position属性为 absolute, 另一个元素设置pos ...
js实现鼠标放在div 悬浮显示另一个div内容链接（不占位置）
js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置) 代码如下不喜勿喷简单记录前端小知识 <div><a id="div1" href=&quo ...
css相对位置之两个同级div下一个div相对上一个div的位置
方式一: <div class="main">main </div> <div class="btn">靠左上角 </ ...
c语言两字符串转数字后相加,一个觉得很难的C语言问题。对两个数字字符串相加。 C语言如何把一个字符串中相连的两个数字转化为一......
导航:网站首页 > 一个觉得很难的C语言问题.对两个数字字符串相加. C语言如何把一个字符串中相连的两个数字转化为一... 一个觉得很难的C语言问题.对两个数字字符串相加. C语言如何把一个 ...
大数据时代下的迁移学习_继深度学习后,下一个热点技术是迁移学习
最早提出大数据时代到来的是知名咨询公司麦肯锡,麦肯锡称:"数据,已经渗透到当今每一个行业和业务职能领域,成为重要的生产因素.人们对于海量数据的挖掘和运用,预示着新一波生产率增长和消费者盈余浪 ...

html两个div浮动后下一个div怎么换行的问题

html两个div浮动后下一个div怎么换行的问题相关推荐

最新文章

热门文章