float 浮动

Posted 2020-10-07

　　float 浮动是前端开发css中最常见用于布局的一种属性之一。CSS中float简单来说，就是使元素向左或向右排列，

其周围的元素也会重新排列。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

向左浮动 float ：left；   向右浮动：right；

浮动的一些规则和注意事项：

1.浮动元素会从文档正常流中删除，但它仍会影响布局

2.浮动非替换元素必须为其指定width，否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性，它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠

6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置，便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容

　器高度以容下浮动元素，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动

10.浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住

11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定) 
13.浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠

时，其边框、背景在浮动元素之下，而内容在浮动元素之上。

14.对某个元素应用clear:left，意味着这个元素的左边不能有浮动元素。

15.clear不能用于非块级元素，在大多数浏览器看来它是一个非块级元素，因此如果对br应用clear来清除浮动不会有任何

效果，除非改变br的display:block。

16.如果某元素应用clear清除浮动，则此元素设置的上外边距值会被忽略，但会有一个重新计算的上外边距值(甚至可能为0).

如果希望此元素与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距。

浮动的实例：

当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流

中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左移动，那么框1向左浮动直到碰

到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元

素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：