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佈局很奇妙，也漸漸被其餘佈局給替代了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。