CSS——浮动float&&清除浮动-CSDN博客

本文链接：https://blog.csdn.net/weixin_45570512/article/details/106477368

浮动

浮动会使元素左右移动，使用了浮动的元素会脱离普通流（标准流）。（可以理解为使用浮动后在原来底层上面又加了一层，浮动便是在加的这层上面显示）

元素添加浮动属性后具有in-block属性（行内块元素）。

什么叫标准流呢？
标准流就是在网页布局中从上到下、从左到右，遇到块级元素自动换行分布。

浮动的元素以他的父级元素为坐标，进行左浮动或者右浮动，知道碰到下一个浮动元素为止。如下图所示，1、2、3盒子都进行了左浮动；他们的父级元素为body，2进行左浮动时遇到浮动的1便停了下来。在这里插入图片描述

1.float语法

  float:  left;//  左浮动

  float:  right;//  右浮动

  float: none;// 默认值，不浮动

  float:  inhert;// 继承父亲框的浮动属性

未设置float的demo
在这里插入图片描述
设置了浮动后的demo图

<style type="text/css">
		.f-nature{
			height: 100px;
			width: 100px;
			background-color: red;
		}
		.f-left{
			height: 100px;
			width: 100px;
			background-color: blue;
			float: left;//左浮动
		}
		.f-right{
			height: 100px;
			width: 100px;
			background-color: green;
			float: right;//右浮动
		}
	</style>

<body>
	<div class="f-nature">正常浮动</div>
	<div class="f-left">左浮动</div>
	<div class="f-right">右浮动</div>
</body>

2.使用浮动后产生的问题

使用浮动后要注意浮动溢出，高度塌陷等问题，所以通常需要在使用后清除浮动。
在con内设置三个div，三个div均左浮动，con的宽度固定，但是高度由里面的内容填充，
如下所示：盒子1，2，3使用左浮动后，脱离原来的文档流（即标准流），原先div（即文章最开始介绍浮动的图）所占的位置消失，1,、2、3没有撑起这个con的高度
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
<head>
	<title>float</title>
	<style type="text/css">
		.box01{
			height: 100px;
			width: 100px;
			background-color: red;
			float: left;
		}
		.box02{
			height: 100px;
			width: 100px;
			background-color: blue;
			float: left;
			/*clear: both;*/
		}
		.box03{
			height: 100px;
			width: 100px;
			background-color: green;
			float: left;
			/*clear: both;*/
		}
		.con{
			width: 500px;
			background-color: orange;
			border: #333 2px solid;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box01">1111</div>
		<div class="box02">2222</div>
	    <div class="box03">3333</div>
    </div>
</body>
</html>

3.清除浮动的办法

清除浮动语法：

	clear: both;
	clear: right;
	clear: left;
	clear: none;

清除浮动方法1

在浮动元素后添加一个空元素，然后使用清除浮动语句，以上面所说产生的问题为例：
在使用了浮动的box01、box02、box03后面添加一个空元素，给该元素设置清除浮动

.clear{
			clear: both;
		}

<div class="con">
	<div class="box01">1111</div>
	<div class="box02">2222</div>
    <div class="box03">3333</div>
    <div class="clear"></div>
</div>
<div class="box4">4444</div>

实现效果如下图，1、2、3将他们的父级元素的高撑起来了在这里插入图片描述

清除浮动方法2

给浮动元素的容器（即父级元素）添加overflow:hidden;

*zoom:1;/添加该语句触发hasLayout兼容,用来兼容低版本IE浏览器/

依然以标题二所说的问题为例，给box01、box02、box03的父级元素添加overflow:hidden;，具体代码如下

.con{
			width: 500px;
			background-color: orange;
			border: #333 2px solid;
			overflow: hidden;
		}

清除浮动方法3

使用css3的after伪元素

.clearfix:after{
			content: ".";//内容为空
			display:block;//转换为块级元素
			height: 0;
			visibility: hidden;//显示隐藏
			clear: both;
		}
.clearfix{
			zoom:1;//用来兼容低版本IE浏览器
		}

<div class="con clearfix">
		<div class="box01">1111</div>
		<div class="box02">2222</div>
	    <div class="box03">3333</div>
    </div>

ps：此种方法没能实现和上面方法相同的效果，原因还未知

清除浮动方法4

父级元素定义height。通过计算给浮动的父级元素设置固定高度的布局。

此方法不推荐，父级元素也会一起浮动，产生新的浮动问题，

3.浮动知识补充

1.当多个浮动在同一行不够位置填充的情况下

如果右侧宽度不够，就向下面显示，首先会找到高度最小的那个，如果右侧还有高度较高的，则在这个高的右侧再找高度最小，直到找到右侧没有较高的，倘若到了最后都没找到，就转到下一行最左侧填充，应该填充在上面的浮动的最突出的水平线之下。

2.清除浮动原理（目前还不了解，尴尬）