一、CSS浮动

一、浮动基础

浮动介绍：浮动是一种布局方式，其被应用的初衷是使用在文字环绕图片的场景，其用来布局具有一定的缺陷

1.浮动特性

当一个元素浮动的时候无论它是block(比如div)还是inline(不如span)都会被转成inline-block属性，也就是不独占一行，可以设置宽高
浮动元素不会超过它父元素的宽度，例如父元素一行放不下两个浮动元素，那个浮动元素会自动换行
浮动元素会脱离文档流排列（它会被它之前的如div影响布局；它会被它之后普通的元素填补了其所在平面的空白区域，但是它由于浮动会在先被看到，普通元素则在下面如果尺寸够大也会被看到）

<style>
	.name>span{
		float: left;
		height: 300px;
		width: 300px;
		background-color: pink;
	}
style>
<body>
	<div class="name">
		<span>span>
	div>
body>

<style>
		.name{

			background-color: red;
		}
		.name>span{
			float: left;
			height: 300px;
			width: 300px;
			background-color: pink;
		}
		.name>.fu{
			height: 400px;
			width: 400px;
			background-color: blue;
		}
style>
<body>
	<div class="name">
		
		<span>54345span>
		<span>54345span>
		<span>54345span>
		<div class="fu">15155155151511551div>
		<div style="clear:both ;">div>
	div>
body>

2.浮动用法

代码：float: left;//还可填right与none

3.清除浮动的影响

子元素里面建立空标签加入：clear:both;

父元素添加伪类元素：

		.name::after{
			content: '';
			clear: both;
			display: block;
		}

二、浮动应用

1.对称布局

解释：
如：

在这里插入图片描述

相关阅读:
深入理解Laravel(CVE-2021-3129)RCE漏洞(超2万字从源码分析黑客攻击流程)
手把手教你电机FOC控制【三】
3D机器视觉：解锁未来的立体视野
js简单知识
[论文笔记]Poly-encoder
Postman接口测试工具详解
网络安全（黑客）——自学2024
Qt 中设置窗体(QWidget)透明度的几种方法
每日一题Day40-41
第7章项目进阶，构建安全高效的企业服务（上）

原文地址：https://blog.csdn.net/weixin_46765649/article/details/126982983