CSS浮动元素与元素溢出解决

原创于 2022-06-06 20:19:58 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了CSS中的浮动元素和元素溢出问题。首先介绍了标准文档流，包括块级元素和行内元素的区别。接着讲解了`display`属性在块级元素与行级元素转换、一行显示和元素隐藏中的应用。然后详细阐述了`float`属性如何实现元素排列，并讨论了浮动后导致的边框塌陷问题以及`clear`属性在清除浮动影响中的局限。最后总结了防止父级边框塌陷的四种方法，包括空div、设定父级高度、使用`overflow`属性，并提到了各自的优缺点。

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

CSS浮动元素与元素溢出解决

前言

做项目时,遇到个css样式问题,今天来回顾记录一下css中的浮动元素

一、标准文档流

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成
块级元素（block）
<h1>…<h6>、<p>、<div>
列表内联元素（inline）
<span>、<a>、<img/>、<strong>…

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、display属性

值	说明
block	块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline	内联元素的默认值,元素会被显示为内联元素,该元素前后没有换行符
inline-block	行内块元素,元素即具有内联元素的特性,也具有块元素的特性
none	设置元素不会被显示

示例:

<style>
	#id{
		//设置元素为内联元素
		display:inline;
	}

</style>

display特性:
1.块级元素与行级元素的转变
2.控制块元素排到一行
3.控制元素的显示和隐藏

三.float属性

将块元素排在一行需要用到什么属性?

1.inline-block
2.float

float属性示例:

<style>
	#id{
		float:left;//左浮动
		float:right;//右浮动
	}


</style>

当设置完元素的宽高和浮动之后,边框会塌陷,解决方法是使用清除浮动元素.
在这里插入图片描述
使用示例:

<style>
	#id{
		clear:both;
	}

</style>

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
溢出处理:
父级添加overflow属性

值	说明
visible	默认值,内容不会被修剪,会呈现在盒子之外
hidden	内容会被修剪,并且其余内容是不可见的
scroll	内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余内容

使用示例:

<style>
	#id{
		overflow:auto;
	}
</style>

四.小结

清除浮动，防止父级边框塌陷的四种方法
浮动元素后面加空div
简单，空div会造成HTML代码冗余
设置父元素的高度
简单，元素固定高会降低扩展性
父级添加overflow属性
简单，下拉列表框的场景不能用

有哪里不足或者更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴可以私信我,我会一一答复,感谢认可,感谢支持!