浮动的特性

1. 浮动主要用于使得 div 脱离标准文档流，生成多列布局
2. 浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距 (这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
3. 浮动元素支持所有的 css 样式、内容撑开宽高、多个元素设置浮动，宽度足够的话，会排在一行、脱离文档流、提升层级半级（也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围）。

注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有 inline-block 属性的元素。

float 属性

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

下面我们用三个 div 来设置不同情况的 div 浮动来通过例子来理解 float 以及 overflow。

三个 div 都不浮动

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
			}
		</style>
	</head>
	<body>



		<div>我是块级元素1，没有设置浮动</div>

		<div>我是块级元素2，没有设置浮动</div>

		<div>我是块级元素3，没有设置浮动</div>



	</body>
</html>


复制代码

效果截图：

在不设置浮动的情况下，三个 div 块会竖着在一列显示

第一个 div 浮动

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				
			}
		</style>
	</head>
	<body>



		<div>块级元素1，设置浮动</div>
		
		<div>块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动</div>

		<div>块级元素3，没有设置浮动</div>



	</body>
</html>



复制代码

效果截图：

故意将第二个 div 块中的内容写得多点，我们可以得出下面的结论：
1. 没有设置浮动的元素会填充浮动元素留下来的空间
2. 浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面
3. 使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围。

第二个 div 浮动

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				float: left
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				
			}
		</style>
	</head>
	<body>



		<div>块级元素1，没有设置浮动</div>
		
		<div>块级元素2，设置浮动</div>

		<div>块级元素3，没有设置浮动</div>



	</body>
</html>


复制代码

效果截图：

由此我们可以很明显的看出：
浮动元素不会超越其前面的元素

三个 div 都浮动

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				float: left
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				float: left
			}
		</style>
	</head>
	<body>



		<div>块级元素1，设置浮动</div>
		
		<div>块级元素2，设置浮动</div>

		<div>块级元素3，设置浮动</div>



	</body>
</html>

复制代码

效果截图：
浏览器宽度足够时，三个 div 会并排排列。
图片[1]-CSS 浮动-一一网
当我们发大页面时，浏览器宽度不足以容纳最后一个 div 时，最后一个 div 掉下来，并且顶部不会超过倒数第二个 div 的底部。

浮动的父子关系

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap2 {
				width: 55px;
				height: 90px;
				border: 3px solid red;
			}


			.class1 {
				width: 20px;
				height: 40px;
				background: blue;
				float: left;
			}


			.class2 {
				width: 20px;
				height: 30px;
				background: yellow;
				float: left;
			}


			.class3 {
				width: 20px;
				height: 30px;
				background: fuchsia;
				float: left;
			}


			.class4 {
				width: 20px;
				height: 20px;
				background: chartreuse;
				float: left;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div>
			<div></div>

			<div></div>

			<div></div>

			<div></div>

		</div>
	</body>
</html>


复制代码

效果截图：

由此我们可以得到下面的结论：
1. 浮动元素不会在其浮动方向上溢出父级的包含块也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距。
2. 浮动元素的位置受到同级同向浮动元素的影响也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面。

浮动影响父层盒子高度

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap2 {
				width: 55px;
				border: 3px solid red;
			}


			.class1 {
				width: 20px;
				height: 40px;
				background: blue;
				float: left;
			}


			.class2 {
				width: 20px;
				height: 30px;
				background: yellow;
				float: left;
			}


			.class3 {
				width: 20px;
				height: 30px;
				background: fuchsia;
				float: left;
			}


			.class4 {
				width: 20px;
				height: 20px;
				background: chartreuse;
				float: left;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div>
			<div></div>

			<div></div>

			<div></div>

			<div></div>

		</div>
	</body>
</html>

复制代码

效果截图：

由此我们可以得到下面的结论：
父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷。

overflow 属性

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

overflow 属性的妙用：
配合着浮动父容器，解决父容器高度他塌陷的问题。
使用 overflow 扩展盒子高度，overflow 属性会触发浏览器重新计算父元素盒子高度。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap2 {
				width: 55px;
				border: 3px solid red;
				overflow: hidden;
			}


			.class1 {
				width: 20px;
				height: 40px;
				background: blue;
				float: left;
			}


			.class2 {
				width: 20px;
				height: 30px;
				background: yellow;
				float: left;
			}


			.class3 {
				width: 20px;
				height: 30px;
				background: fuchsia;
				float: left;
			}


			.class4 {
				width: 20px;
				height: 20px;
				background: chartreuse;
				float: left;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div>
			<div></div>

			<div></div>

			<div></div>

			<div></div>

		</div>
	</body>
</html>


复制代码

效果截图：

溢出处理

样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #d1{
                /* 容器 */
                border: solid 1px red;
                height: 200px;
                width: 150px;
                /* overflow: visible; */
                /* overflow: hidden; */
                /* overflow : scroll; */
                /* overflow: auto; */
                overflow-x: scroll;
            }

            #d2{
                /* 出现移除的内容*/ 
                width: 180px;
                border: solid 2px green;
            }

        </style>
    </head>
    <body>

        <div>
            <div>222222</div>

        </div>
    </body>
</html>

复制代码

效果截图：

当 d2 的宽度超过了父级 d1 的宽度时，我们可以通过设置不同的 overflow 属性值来实现不同的解决办法，我所演示的是浏览器会显示滚动条以便查看其余内容。

清除浮动

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

样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                border: solid 1px blue;
                
            }
            .class1 {
                width: 200px;
                height: 100px;
                background: palegreen;
                float: left;
            }    

            .class2 {
                width: 250px;
                height: 130px;
                background: gold;

                float: left;
            }

            .class3 {
                width: 300px;
                height: 180px;
                background: red;
                float: left;

            }
            /* .clear{
                clear: both;
            } */
        </style>
    </head>
    <body>
        <div>
            <div>我是块级元素1</div>
            <div>我是块级元素2</div>
            <div>我是块级元素3</div>
            <div>牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南</div>
        </div>

    </body>
</html>

复制代码

没有清除两侧浮动效果截图：
图片[2]-CSS 浮动-一一网
把代码中的这段代码的注释去掉，来清除两侧浮动

/* .clear{
    clear: both;
} */

复制代码

清除两侧浮动效果截图：

可以很明显的看出：
清除两侧浮动后，有扩展父级盒子高度的作用

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的 “一键三连” 了吗，没错点它 [哈哈]

加油！

共同努力！

Keafmd

文章版权归作者所有，未经允许请勿转载。

THE END

前端

【前端】嘿，Nest.js实战开发系列 01 ── Nest.js初体验

Kaspersky IS&AV 内存损坏漏洞

Node v16.2.0 发布

多款ZOLL Defibrillator / Monitor产品安全漏洞

网络协议之:socket协议详解之Socket和Stream Socket

Go 结构体定义、实例化以及初始化

CSS 浮动

浮动的特性

float 属性

三个 div 都不浮动

第一个 div 浮动

第二个 div 浮动

三个 div 都浮动

浮动的父子关系

浮动影响父层盒子高度

overflow 属性

溢出处理

清除浮动