一、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.对称布局

解释：
如：

在这里插入图片描述

相关阅读:
Linux系统编程（五）——Linux下的多线程
WordPress Page Builder KingComposer 2.9.6 Open Redirection
Solr搜索参数详解
数学物理方程：球函数
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案
Day53【动态规划】1143.最长公共子序列、1035.不相交的线、53.最大子序和
每日一题：LeetCode-589.N叉树的前序遍历
注意！年底前没参加继续教育的会计，或将无法报名2023年会计考试！
【springboot】各种条件注解与源码分析
深度学习概述：从基础概念、计算步骤到调优方法

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