前言

這個問題是在處理蘇寧平臺的官方旗艦店模板遇到的。蘇寧限定的頁面顯示區域寬度為990px。模板可以自定義，但是嵌入的程式碼被包含在一個div裡面。這個div被奇葩的設定了內嵌樣式overflow:hidden;但是我們這邊的產品和設計師要求和官網一樣，要1240的寬度。

問題

如何掙脫overflow:hidden的限制？

分析

1. overflow的定義與作用？
2. overflow如何使用？
3. 關聯屬性是什麼？將產生什麼效果？

解答

1. overflow的定義與作用

   overflow的定義和用法
   屬性規定當內容溢位元素框時發生的事情。

   說明

   
   這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，使用者代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

   屬性說明

   屬性	值
   預設值：	visible
   繼承性：	no
   版本：	CSS2
   JavaScript 語法：	object.style.overflow=”scroll”

   取值說明

   值	描述
   visible	預設值。內容不會被修剪，會呈現在元素框之外。
   hidden	內容會被修剪，並且其餘內容是不可見的。
   scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
   auto	如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
   inherit	規定應該從父元素繼承 overflow 屬性的值。

2. overflow的關聯屬性和相關效果
   因為這個問題更重要所以提前來講一下。

   關聯屬性 ：css 定位

   position
   表示：規定元素的定位型別。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

   更多參考盒子模型
   position的取值和含義

   值	描述
   absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
   fixed	生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
   relative	生成相對定位的元素，相對於其正常位置進行定位。因此，”left:20” 會向元素的 LEFT 位置新增 20 畫素。
   static	預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
   inherit	規定應該從父元素繼承 position 屬性的值。

   1. float
      float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
      如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
      值有：left , right , none(預設) , inherit
      

   1、 隱藏盒子模型中超出規定區域的部分。
   2、 清除由於浮動導致的高度不一致問題。

3. overflow的用法(同上)

前兩天在處理蘇寧平臺的旗艦店的模板，蘇寧後臺模板可以自定義，但是嵌入的html內容是被一個div包著的。

標籤給包著的。

示例程式碼如下：

<div class="template">
<div style="overflow:hidden;">
<!-- 內嵌程式碼 -->
<div style="width: 1920px; margin: 0 auto;">
    <div style="margin-left: -465px; position: absolute;">
        <table style="width: 1980px;" border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td>
                        <!-- 內容區域 -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- 內嵌程式碼結束 -->
</div>
</div>

template 的寬度為990px，現在將拓展這個限制。就靠裡面那一塊。