CSS布局:float 流动布局

3,787 阅读3分钟

前言

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

CSS布局:高度已知,左边 300px, 右边300px, 中间自适应。 这是实现(演示):

<html>
<style type="text/css">
html *{
    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;    
}
</style>
  <body>
    <div id = "wrap">
      <div id = "left"></div>
      <div id = "right"></div>
      <div id = "mid">中间中间</div>
    </div>
  </body>
</html>

存在三个疑问:

    1. 为什么 mid 要放在 left,right 后面,不符合文本流从上到下,从左到右布局?
    1. mid的宽度是100%,为什么文字不会跑到left块后面面?
    1. float布局是否还有其他特性?

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

关于float的定义

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

这里有几个float特性:

  • 沿其容器左侧或右侧
  • 允许文本和内联元素环绕它
  • 从文本流移除

解决问题

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

答:如果吧mid 放在中间,如下:

    <div id = "wrap">
      <div id = "left"></div>
       <div id = "mid">中间中间</div>
       <div id = "right"></div>
    </div>

渲染后如下:

这种怪异情况,right为什么会跑到下面? hmtl文档渲染过程中,是边解析边渲染的。按照我们的代码,第一个是:

<div id = "wrap"></div>

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

<div id = "left"></div>

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

<div id = "mid">中间中间</div>

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

<div id = "right"></div>

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布局很奇妙,也渐渐被其他布局给替代了。