css的浮动

CSS的浮动

---

• 什么叫做浮动
• 如何让盒子浮动
• 浮动标签和兄弟标签的关系
• 浮动标签和父标签的关系
• 清除浮动

---

• 什么叫浮动/为什么要浮动

浮动最初的作用是用于文字包裹图片的效果，通过让图片浮动，让原本作为块级元素的图片不在单独占一行，而是可以和其他元素并列存在，而在后面的使用中发现，浮动用于排版非常方便。在前面我们虽然学习了不同元素的转换，通过元素转换，我们可以把块级元素转换为行内块元素，也可以实现多个可设置宽高的元素并列，但这样做有着致命的缺陷，行内块元素虽然可以做到并列却中间有间隔而且难以去除，当我们需要将两个元素分别放在左右并对齐时行内块元素也难于做到。而浮动可以把这些问题很好的解决。

---

• 如何浮动

要让一个元素浮动，只需要在CSS样式只添加flort值，分别为：
flont:left （左侧浮动）
flont:right（右侧浮动）

---

+ ##### 浮动标签与兄弟标签的关系

未添加浮动的标签我们称之为标准流，遵循着从上到下的规则。而浮动标签是不占据位置的，当两个兄弟标签一个上一个下时，上标签浮动，下标签未浮动时，下标签会占据浮动标签的位置，我们所看到的是浮动标签遮盖了未浮动标签，当多个浮动标签并列时，浮动标签会并列排列，当父级元素宽度不足以排列时，则换行排列。

---

• 浮动标签与父标签的关系

在实际编写中，为使布局不出问题，我们通常使用标准流和浮动相结合的办法进行编写，浮动元素经常是套在一个标准流的盒子中。浮动元素不会超出盒子的内边距和边框。

---

• 清除浮动

在我们编写的过程中，经常会遇到不能给一个盒子绝对高的情况，因为我们并不清楚内容的多少，在这种情况下只能让盒子随内容被撑大，标准流的盒子是可以的，但是浮动元素因为是完全脱标的并不真正占有位置。如果不给绝对的高则会被默认为0，清除浮动就是为了使浮动元素可以随着内容大小而做出改变。

<style>
	.clearfix: before ,
	.clearfix: after {
		content: "";
		display: table;
	}
	.clearfix: after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
</style>

或者：

<style>
	.clearfix:after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
</style>