Float浮动

时间 2019-11-12

标签 float 浮动栏目 CSS 繁體版

原文原文链接

Float特征：html

1.块在一排显示布局

2.支持内联宽度spa

3.默认内容支撑宽度htm

4.脱离文档流blog

5.提高层级半层文档

Float产生的影响：it

float有脱离文档流的特性使其与父级不在同一文档流，从而影响布局。class

例如如下代码：item没有撑起box的高度扩展

<head>		
<style>
			.box{
				border: 2px solid #00008B;
				
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>

清除Float方法：meta

1.加高度（扩展性很差）

<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 2px solid #00008B;
height: 100px;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>

2.父级浮动（页面中全部元素都加浮动，会影响margin左右自动失效）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				border: 2px solid #00008B;
				float: left;
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>

3.inline-block（margin左右auto失效）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				border: 2px solid #00008B;
				display: inline-block;
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>

4.空标签（ie6最小高度16px）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.fix{
				clear: both;
			}
			.box{
				border: 2px solid #00008B;
			    
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		<div class="fix"></div>
		
		</div>
	</body>

5.br

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				border: 2px solid #00008B;
			
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		<br clear="all"/>
		</div>
	</body>

6.after伪类（content属性）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box:after{
				content: " ";
				clear: both;
				display: block;
			}
			.box{
				border: 2px solid #00008B;
			   
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>

7.overflow（hidden | scroll等）

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		
			.box{
				border: 2px solid #00008B;
			    overflow: hidden;
			}
			.item{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		
		
		</div>
	</body>