网页中的浮动

是九二呀

已于 2023-04-25 17:26:33 修改

阅读量1.1k

点赞数

分类专栏： HTML+CSS+JavaScript CSS 前端文章标签：前端 css html

于 2023-04-21 23:11:43 首次发布

本文链接：https://blog.youkuaiyun.com/Y9232/article/details/130290142

版权

本文详细介绍了网页布局中的浮动和inline-block属性，包括它们的使用、清除浮动的方法及优缺点。通过讨论display属性的不同值，特别是block、inline-block和浮动属性（左浮、右浮），展示了如何控制元素在页面上的布局。同时，提到了清除浮动的多种方法，如clear属性、设置父级高度和使用overflow属性。

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

五、inline-block和浮动的优缺点

1.优点

2.缺点

一、网页的布局

1.网页布局分类

网页基本上都包括网站导航、网页主体内容和网页版权三个部分，但布局上各不相同。网页布局类型有上左右下布局、上左中右下布局、左边固定右边自适应布局等，网页的头部和底部都差不多，关键在于中间的主体部分，主体部分常见的就是两栏布局和三栏布局。如下图：

2.标准文档流

标准文档流是指元素根据块级元素的特性按从上到下、从左到右的方式自然排列。如下图就是标准文档流排列方式：

标准文档流

上图所示的每小块的内容都是竖直排列下来的，是由于块级元素的特性造成的，无论内容多少都会独占一行。

二、display属性值的使用

display属性规定元素的显示类型，网页经常使用的有以下四个：

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

div元素和span元素在设置相同css样式时，表现形式不一样，如下：

<style>
			div {
				width: 100px;
				height: 100px;
				border: 1px solid blue;
			}
			span {
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
</style>
<body>       
        <div>div块级元素</div>
		<span>span行内元素</span>
</body>