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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。