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

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


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


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

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

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

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

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

没添加clear:both之前如下:

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

添加clear:both之后如下:

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

下面说一下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。

还有一个更简单的就是直接在第二个div后面加一个</br>换行标记。