CSS布局：float 流动布局

时间 2019-11-30

标签 css 布局 float 流动栏目 CSS 繁體版

原文原文链接

前言

对float布局一直是只知其一;不知其二，只知道会脱离文本流，今日看了一道题：css

CSS布局：高度已知，左边 300px, 右边300px, 中间自适应。 这是实现（演示）：html

<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>
复制代码

存在三个疑问：ide

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

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

关于float的定义

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

这里有几个float特性：

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

解决问题

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

答：若是吧mid 放在中间，以下：spa

<div id = "wrap">
      <div id = "left"></div>
       <div id = "mid">中间中间</div>
       <div id = "right"></div>
    </div>
复制代码

渲染后以下： code

这种怪异状况，right为何会跑到下面？ hmtl文档渲染过程当中，是边解析边渲染的。按照咱们的代码，第一个是：

<div id = "wrap"></div>
复制代码

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

<div id = "left"></div>
复制代码

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

<div id = "mid">中间中间</div>
复制代码

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

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