网页中的浮动

原创已于 2023-04-25 17:26:33 修改 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #css #html

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

前端同时被 3 个专栏收录

16 篇文章

订阅专栏

HTML+CSS+JavaScript

14 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

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

五、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>

给这两个元素都加上display：block时，如下图

将代码改为display：inline时，如下图：

将代码改为display：inline-block时，如下图：

在使用display: inline-block可能会出现错位的情况，解决方法：使用display: inline-block出现错位

将代码改为display：none时，可以使元素在浏览器中隐藏。

三、float属性

浮动也可以使块级元素排列在一行并且支持宽高。

常用的浮动属性值：

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值，不浮动

1.设置左浮

<style>
			.a {
				width: 700px;
				margin: 0 auto;
			}
			.a div {
				float: left;
		}
</style>
<body>
		<div class="a">
			<div class="b"><img src="./2121.jpg" alt="" /></div>
			<div class="c"><img src="./2144.jpg" alt="" /></div>
			<div class="d"><img src="./2122.jpg" alt="" /></div>
			<div class="e"><img src="./2123.jpg" alt="" /></div>
			<div class="f"><img src="./2133.jpg" alt="" /></div>
		</div>
</body>

2.设置右浮

<style>
			.a {
				width: 700px;
				margin: 0 auto;
			}
			.a div {
				float: right;
		}
</style>
<body>
		<div class="a">
			<div class="b"><img src="./2121.jpg" alt="" /></div>
			<div class="c"><img src="./2144.jpg" alt="" /></div>
			<div class="d"><img src="./2122.jpg" alt="" /></div>
			<div class="e"><img src="./2123.jpg" alt="" /></div>
			<div class="f"><img src="./2133.jpg" alt="" /></div>
		</div>
</body>

四、清除浮动的方法

1.clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在两侧

2.解决父级边框塌陷的方法

$\rightarrow$ 在浮动的元素后面加空div：很简单，但是空div会造成HTML代码冗余；

$\rightarrow$ 设置父元素的高度：很简单，但固定高度会降低元素扩展性；

$\rightarrow$ 为父级添加overflow属性：很简单，但是没有下拉框的场景不能使用；

$\rightarrow$ 为父级添加伪类after；代码稍微复杂一点，但是没有副作用，推荐使用。

详细代码参考：父级边框塌陷的解决办法

3.overflow属性常用值

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

overflow: visible;时，如下

<style>
			.a {
				width: 500px;
				height: 400px;
				border: 2px solid #fa0;
                overflow: visible;
			}
</style>
<body>
		<div class="a">
			<img src="./2023-04-21_162317.jpg" alt="" />
			<p>
				数字化转型，是国家的经济需求，特别是对传统能源行业更为重要。目前来看，加快数字化转型是能源行业实现高质量发展的重要途径和必然趋势。但现在我们还面临很多挑战，包括对数据的治理、理解，对数字资产化的理解，还存在一些问题。所以，在解决这些问题的过程中，数字化转型是必须要做好的一件事，也是在建成覆盖全要素、全方位、全产业，支撑各领域业务创新的管理中的重要体现，这些都需要我们从源头上做起，数据采集、存储、应用、质量管控，以及在运用过程中，平台的建设等等。
				当前，对一些新兴企业来说，它的基础比较好，数据管控质量相对较高，而对于传统的工业企业来说，难度比较大。未来，需要我们在应用过程中不断完善，不断在体制建设过程中相互适应。我认为，数字化转型是在试用过程中不断发展的，通过适应技术迭代，一定会成为企业发展、创新的驱动力，只有通过数字化转型，才能使数据创新力提升的更快、更准，才能满足生产的需求。
			</p>
		</div>
</body>