html中的float布局规律,CSS布局：float 流动布局

前言

对float布局一直是一知半解，只知道会脱离文本流，今日看了一道题：

CSS布局：高度已知，左边 300px, 右边300px, 中间自适应。

这是实现(演示)：

margin: 0;

}

#wrap div{

height: 300px;

}

#left{

float: left;

width: 300px;

background-color: red;

}

#mid{

text-align: left;

background-color: yellow;

}

#right{

width: 300px;

float: right;

background-color: blue;

}

中间中间

复制代码

存在三个疑问：

为什么 mid 要放在 left，right 后面，不符合文本流从上到下，从左到右布局？

mid的宽度是100%，为什么文字不会跑到left块后面面？

float布局是否还有其他特性？

带着这些问题，重读了MDN关于float 布局的文档

关于float的定义

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性(与绝对定位相反)。 —— MDN

这里有几个float特性：

沿其容器左侧或右侧

允许文本和内联元素环绕它

从文本流移除

解决问题

1. 为什么 mid 要放在 left，right 后面，不符合文档流从上到下，从左到右？

答：如果吧mid 放在中间，如下：

中间中间

复制代码

渲染后如下：

这种怪异情况，right为什么会跑到下面？

hmtl文档渲染过程中，是边解析边渲染的。按照我们的代码，第一个是：

复制代码

这时候就创建了一个wrap的块，高度300px，宽度默认100%。接着渲染：

复制代码

left块它的容器是wrap块，所以它沿着wrap的左侧放置，并脱离文本流，不影响后面非float元素。

中间中间

复制代码

普通块元素，因为left是float元素，不参与文本流布局，所以mid块平铺，宽度默认100%，当设置left背景透明时，可以看到黄色mid块；

复制代码

right块也是脱离文本流。但是float布局有一点：沿其容器左侧或右侧「不是左上或右上」，也就是说，right块所处的第二行「第一行已经被mid平铺了」，向右放置。

2. mid的宽度是100%，为什么文字不会跑到left块后面？

答：float的一个特性：允许文本和内联元素环绕它，就是文本会正常布局换行，但会避开float块。

当有两个mid，Left块比较大的时候，也会横跨两个mid块

3. float布局是否还有其他特性？

z-index失效

z-index只能使用处于同个文本流，这里无法通过设置mid的z-index使它处于Left上面

清除浮动

如果想是某个块元素不受这个 float影响；只需要设置 clear：both

这里可看出，最后一个块把上面的都当成普通的块，然后根据自身特性，该独具一行还是从左到右填充

float块超出容器的高度时，会直接溢出

灰色框为容器的区域；

这个我的理解是，float块除了根据容器「wrap块」的定位之外，不受容器任何影响，也不会对容器产生作用。float的一个特性，脱离文本流。也可以解释上面这句话。

BFC

只要触发容器的BFC特性，容器会直接被float块撑开「容器为灰色」

见块格式上下文

后记

float布局很奇妙，也渐渐被其他布局给替代了。