浮动的基本特点

float属性值为：

- left：左浮动，元素靠上靠左

- right：右浮动，元素靠上靠右

默认值为none

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				border:3px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<span>Lorem ipsum dolor…</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container{
				width: 500px;
				height: 500px;
				background: lightblue;
			}
			.container div{/*给div设置一个统一 的样式*/
				width: 100px;
				height: 100px;
				background: red;
			}
			.container .left{
				float: left;
				
			}
			.container .right{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>、

###盒子尺寸

1.宽度为auto时，适应内容宽度

<div class="container">
			<div class="left">浮动盒子的宽度默认 为auto</div>
			<div class="right">宽度自适应</div>
		</div>

<style type="text/css">
			/*span{
				border:3px solid red;
				float: left;
			}*/

			.container{
				width: 500px;
				height: 500px;
				background: lightblue;
			}
			.container div{/*给div设置一个统一 的样式*/
				/*width: 100px;*/auto 
				height: 100px;
				background: pink;
			}
			.container .left{
				float: left;
				
			}
			.container .right{
				float: right;
			}
		</style>

2. 同理高度为auto时，与常规流一样，适应内容的高度

3. 在设置有浮动时margin为auto表示为0.

.container div{/*给div设置一个统一 的样式*/
				/*width: 100px;*/
				/*height: 100px;*/
				background: pink;
				margin: auto;
			}
没有任何变化

4. 边框、内边距、百分比设置与常规流一样

除了高度的百分比之外其他的百分比设置相当于包含块的内容

盒子的排列

1. 左浮的盒子靠上靠左排列

<div class="container">
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
			<div class="child">1</div>
		</div>

.container{
				width: 500px;
				height: 400px;
				background: pink;
			}
			.child{
				float: left;
				width: 100px;
				height: 100px;
				border: solid 1px red;
				
			}

2. 右浮的盒子靠上靠右排列

同理

3. 常规流块盒在排列时前边有浮动流，无视浮动盒子

4. 浮动盒子在包含块中排列时，会避开常规流块盒

###高度塌陷

高度塌陷的原因：常规流盒子的自动高度，不考虑浮动盒子

如果是浮动流盒子高度就塌陷了

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.container{
			padding: 20px;
			background: pink;
		}
		.child{
			width: 200px;
			height: 200px;
			background: red;
			margin: 5px;
			float: left;
		}
	</style>
	<body>
		<div class="container">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child">3</div>
			<div class="child">4</div>
			<div class="child">5</div>
		</div>
	</body>
</html>

清除浮动用到css属性：clear（处理塌陷问题）

- 默认值：none

- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方

- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.container{
			padding: 35px;
			background: pink;
		}
		.child{
			width: 200px;
			height: 200px;
			background: red;
			margin: 5px;
			float: left;
		}
		.clear-float::after{/*after伪元素  让元素出现在所有浮动的下方*/
			/*三件套*/
			content: "";
			display: block;
			clear: both;
		}
	</style>
	<body>
		<div class="container clear-float">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child">3</div>
			<div class="child">4</div>
			<div class="child">5</div>
			<div class="child">5</div>
			<div class="child">5</div>
			<div class="child">5</div>
			<div class="child">5</div>
			
		</div>
	</body>
</html>

css-浮动基础-自我总结

浮动的基本特点

###盒子尺寸

盒子的排列

###高度塌陷