关于CSS中浮动引发的特殊情况，“大坑”

本文链接：https://blog.csdn.net/qq_42698326/article/details/104325171

浮动引发的特殊情况

一、换行显示

1、当父元素显示不下所有浮动元素时，显示不下的后面的元素会换行显示

<!doctype html>
<html >
	<head>
		<title></title>
		<meta charset="UTF-8">
		<style>
			div{width:200px;height:100px;}
			#d1{
				height:150px;
				background:#f00;
				float:left;
			}
			#d2{
				background:#ff0;
				float:left;
			}
			#d3{
				background:#0f0;
				float:left;
			}
			#d4{background:#f0f;float:left;height:300px;}
			#d5{background:#afa;float:left;}
		</style>
	</head>
	<body>
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
	<div id="d4"></div>
	<div id="d5"></div>
	</body>
</html>

在这里插入图片描述
本来5号元素应该在6号位置，但是因为缩小浏览器宽度，所以换行显示到下一行。

2.元素优先网页面顶部上浮，然后再向左/右对齐。
当前面的1、2、3、或四号元素的高度变大时，css代码如下：

div{width:200px;height:100px;}
#d1{background:#f00;float:left;height:160px;}
#d2{background:#ff0;float:left;}
#d3{background:#0f0;float:left;}			
#d4{background:#f0f;float:left;}
#d5{background:#afa;float:left;}

在这里插入图片描述
5号元素没有出现在1号元素下面，而是2号元素的下面

3、浮动元素占位：浮动元素会根据浮动的方向，占据对应方向上的位置，不让后面的元素占用。
比如，把四号元素的高度设为300px，代码和效果如下：

div{width:200px;height:100px;}
#d1{background:#f00;float:left;height:160px;}
#d2{background:#ff0;float:left;}
#d3{background:#0f0;float:left;}			
#d4{background:#f0f;float:left;height:300px;}
#d5{background:#afa;float:left;}

在这里插入图片描述
4号元素占据了它本身及其左边的所有位置，所以5号只能占据如图所示的“big”位置（请自行尝试当4号元素右浮动时的效果）

二、元素一旦浮动，如果没有自定义宽度，其宽度由内容决定

我们知道，如果我们不是指子块级元素的宽度，其宽度默认是父级元素宽度的100%。

<!doctype html>
<html >
	<head>
		<title></title>
		<meta charset="UTF-8">
		<style>
			p{
				height:100px;border:2px solid red;
			}
		</style>
	</head>
	<body>
		<p>abbvbv</p>
	</body>
</html>

在这里插入图片描述
给p标签加上浮动：

可以看到，p标签的宽度变小了，其宽度有其内容决定。

三、行内元素加浮动

我们知道，行内元素不能设置宽高和上下外边距（img、input除外），如下：
宽高和上下外边距不起作用

<style>
			span{
				height:100px;
				width:300px;
				border:2px solid red;
				margin:50px;
			}
			div{
				width:700px;
				height:300px;
				border:2px solid #ff0;
			}
		</style>
	</head>
	<body>
		<div><span>好嗨呦，感觉人生已经达到了巅峰</span>
		<span>好嗨呦，感觉人生已经达到了巅峰</span></div>
		
	</body>

在这里插入图片描述
我们给span加左浮动

span{
				height:100px;
				width:300px;
				border:2px solid red;
				margin:50px;
				float:left;
			}

在这里插入图片描述
看到，margin和宽高都其作用了。

四、环绕效果

文本，行内元素，行内块是不会被浮动元素压在下方。
而是巧妙的避开了所有浮动元素，环绕着浮动元素显示。

五、高度坍塌

块级元素的高度如果不设置，高度以内部元素内容为准
但是如果内部元素都是浮动元素，浮动元素不占据页面空间
父元素的高，没有了。
解决方案
1.直接为父元素设置高度
弊端：不知道父元素高度怎么办？！
2.父元素也浮动
弊端：浮动会影响后续元素
3. overflow:hidden/auto;（加载父元素）
弊端：当元素真的需要显示溢出内容的时候，就显示不出来了
4.在父元素中追加一个空的块级元素，并且设置clear:both;