浮動。。。。。

時間 2019-11-22

標籤浮動简体版

原文原文鏈接

在寫網頁的時候，不少時候都會用到浮動，在使用浮動的時候，會脫離文檔流，而且子級浮動會致使父級的高度塌陷，在這個時候咱們能夠使用overflow：hidden來觸發bfc，自動找回父級的高度。html

bfc又叫作塊級格式化上下文spa

在浮動的時候也會遇到行內元素的浮動，行內元素浮動後會自動轉化爲塊級元素，能夠設置寬高。3d

浮動文本類的標記，若是沒有指定寬度，浮動後會自動摺疊到最小寬度。htm

有的時候當你浮動後，會發現浮動對你的後面的元素形成了影響，這個時候能夠書寫clear：both來消除前面的浮動對自身的影響。文檔

若是父級包含塊沒有足夠的空間來容納子級浮動元素，那麼子級元素會自動換行，不會覆蓋前一個元素。it

下面來舉個栗子：io

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	.no{
	width: 500px;
	height: 400px;
	background-color: gold;
	}
	.no1{
	width: 250px;
	height: 400px;
	background-color: blue;
	float: left;
	}
	.no2{
	width: 250px;
	height: 400px;
	background-color: blueviolet;
	float: right;
	}
	.nox{
	width: 250px;
	height: 100px;
	background-color: aqua;

	}
	.noy{
	width: 125px;
	height: 100px;
	background-color: cadetblue;
	float: right;
	}
	.now{
	width: 125px;
	height: 50px;
	background-color: coral;
	}
	.no3{
	width: 250px;
	height: 100px;
	background-color: #14ff39;
	}
	.no4{
	width: 250px;
	height: 100px;
	background-color: #ff1813;
	}
	.nol{
	width: 125px;
	height: 100px;
	background-color: #9f0ca0;
	float: right;
	}
	.noi{
	width: 125px;
	height: 50px;
	background-color: #33d1ff;
	}
	.no5{
	width: 250px;
	height: 100px;
	background-color: #fdff2f;
	}
	</style>
	</head>
	<body>
	<div class="no">
	<div class="no1"></div>
	<div class="no2">
	<div class="nox">
	<div class="noy">
	<div class="now"></div>
	</div>
	</div>
	<div class="no3"></div>
	<div class="no4">
	<div class="nol">
	<div class="noi"></div>
	</div>
	</div>
	<div class="no5"></div>
	</div>
	</div>
	</body>
	</html>

固然，也許有更好的寫法，不過我還沒學會。。。。。。。哈哈哈哈哈哈table

相關標籤/搜索

每日一句

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