浮动。。。。。

时间 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