《WEB前端》float浮动要点，清除浮动的方法。

如果想要对网页进行布局，那么比不可少的必须用到浮动。

浮动的特性：脱离了标准的文档流。

对于块级元素如span想要进行宽度和高度的改变，就可以对span进行浮动。

浮动之后不存在块级元素和行级元素，所有的元素都是平等的。

父元素浮动子元素不会浮动《不同于JAVA的继承》

（重点）浮动元素会被动的覆盖其他非浮动元素，但是不会覆盖其他非元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<style type="text/css">
		h1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		div{
			float: left;
			width: 400px;
			height: 100px;
			background-color: black;
		}
	</style>

<body>
	<div></div>
	<h1></h1>
	
</body>
</html>

（重点）浮动的元素不会去主动覆盖其他的非浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
h1{
width: 200px;
height: 200px;
background-color: red;
}
div{
float: left;
width: 400px;
height: 100px;
background-color: black;
}
</style>
<body>
<h1></h1>
<div></div>
</body>
</html>

浮动没有外边距合并（非浮动外边距会合并）

浮动没有外边距的塌陷

浮动元素会自动贴边

清除浮动的方法：

为什么要清除浮动？

因为一个盒子容器里面有一个脱标的元素

想一下，假如里面那个元素脱标了，那么就代表这个元素已经不属于标准文档流的范畴了

所以他不会占用实际的物理空间，所以盒子容器不会被这个脱标的元素所撑开空间，这时候会导致有些东西显示不出来，比如你给容器加的背景颜色就会显示不出来，因为这个盒子容器已经没有高度了。

解决方法：

1.事先给盒子容器定义一个高度（一般不赞成使用）

2.给盒子添加overflow：hidden(偏方，但也不赞成使用)

3.给盒子也添加浮动（绝对不赞成）

4.clear 属性（none：允许两边都有浮动 both：清除两边都没有浮动 left：清除左边浮动的影响 right：清除右边浮动影响）（还行，但是marrgin top，buttom失效因为父容器还是没有高度）

	<style type="text/css">
		.clearFix{}
		.clearFix::after{
			clear: both;
		}
		.clearFix::before,clearFix::after{
			content: "";
			display: block;
		}

	</style>

(国际通用)

《WEB前端》float浮动要点，清除浮动的方法。

猜你喜欢