CSS 浮动元素对块级元素和行内元素的影响

最新推荐文章于 2024-05-06 13:10:01 发布

Vrainy

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量3.9k

点赞数 8

分类专栏： CSS学习笔记文章标签： css

本文链接：https://blog.csdn.net/Vrainy/article/details/105693893

版权

CSS学习笔记专栏收录该内容

3 篇文章 2 订阅

订阅专栏

前言：我们可能听说过，float元素是脱离了文档流的元素，其他元素将无视它的存在。但当我们实际应用中，实际效果并不完全是这样的。

float

float设计之初，主要是为了解决文章配图时的布局问题。如下图
float布局
HTML代码

<body>
	<img src="css.png" alt="CSS-icon">
	<article>
		CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。
		本文主要介绍用于装饰HTML网页的CSS技术。
		其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。
		CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。
		CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
	</article>
</body>

CSS代码

img{
	float: left;
	width: 100px;
	height: 60px;
	margin: 10px;
	border: 1px solid;
}
article{
	background-color: #eeeeee;
	padding: 10px;
	width: 500px;
	height: 180px;
}

从上图可以看到，<img>浮动后，<img>的下面有<article>的背景颜色，这说明<article>确实忽略了<img>的存在。但同时我们也注意到，<article中的文字并没有忽略<img>的存在，而是绕开<img>进行排列，这说明浮动元素可能对块级元素和行内元素有不同的处理方式，下面分开讨论一下。

块级元素
对于块级元素而言，他们会忽视浮动元素的存在，根据上一个非浮动元素或是父元素来进行自己的定位。如图中<article>略过<img>，而根据<body>来进行自己的定位，如果<article>前还有一个非浮动元素，则会根据该元素进行定位，如下图。
在这里插入图片描述
HTML代码

<body>
	<img src="css.png" alt="CSS-icon">
	<div id="block"></div>
	<article>
		CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。
		本文主要介绍用于装饰HTML网页的CSS技术。
		其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。
		CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。
		CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
	</article>
	</div>
</body>

CSS代码

#block{
	width: 200px;
	height: 200px;
	background-color: #FAEBD7;
}

行内元素
行内元素与块级元素不同，不能设置宽高。行内元素实际上受制于行框，而这个行框是不会忽视浮动元素的存在。文字就属于行内元素，或者说，<article>里面的文字我们可以认为是被包裹在一个<span>里的，而<span>是一个行内元素。下面我们调用控制台查看一下行内元素的行框的宽度。
在这里插入图片描述
注：这里为了更准确显示每行行框的尺寸，每句分别用<span>包裹。如果是整段包裹，在显示行内元素宽度时，会显示最宽的一行的行框的宽度。
从图中展示的行框的宽度即可印证行内元素不会忽视浮动元素。

浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得想浮动根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。——《精通CSS：高级Web标准解决方案（第2版）》