整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
小白啊！今天來(lái)的這么早？”
“恩，昨天看了縱布局以后，今天已經(jīng)著急學(xué)橫布局怎么實(shí)現(xiàn)了，這兩個(gè)布局會(huì)做了，我是不是就可以做任意的網(wǎng)頁(yè)布局了？”
“普通的頁(yè)面布局肯定一點(diǎn)問(wèn)題沒(méi)有，改天我再跟你探討一些關(guān)于css的position的問(wèn)題，今天我們還是說(shuō)橫布局吧！”
老朱接著說(shuō)道：“小白，你知道為啥叫div容器么？”
“不知道！為什么呢？”
“最簡(jiǎn)單的原因就是它的里面可以放東西！另外它還可大、可小、可自由變形還可固定不變，昨天咱倆談布局的時(shí)候說(shuō)到了塊容器前后默認(rèn)是有換行符的，可是有時(shí)候我們希望兩個(gè)塊容器在一行，這怎么辦？總部能用table來(lái)做吧！”
“你可以想象一下，有一個(gè)盒子他的里面可以放很多的東西，假如現(xiàn)在給你拿來(lái)寬度是這個(gè)盒子內(nèi)徑一半的小盒，讓你放到大盒子里面并且盡可能不要浪費(fèi)盒子的空間，你會(huì)怎么放？”
小白說(shuō)道：“我肯定會(huì)沿著盒子的左上角或者右上角一個(gè)一個(gè)緊挨著往里面放。”
“那如果小盒子寬度是大盒子的三分之一呢？是不是也是一樣的放法？”
“恩，是的！”
老朱說(shuō)：“在css樣式里面，有一個(gè)float屬性，它可以給容器靠左或者靠右的趨勢(shì)。跟你擺放盒子的放法一樣，如果float設(shè)置成left，容器就會(huì)沿著父容器的左上角一個(gè)挨著一個(gè)排列，當(dāng)?shù)谝恍惺Ｓ嗟目臻g不足以放下一個(gè)容器的時(shí)候，這個(gè)容器就會(huì)換行，并且靠左尋找可以放他的位置。”
小白聽到這里有點(diǎn)迷糊，問(wèn)道：“如果有一個(gè)容器右側(cè)實(shí)在放不下了，他是不是就從第二行的最左邊開始排列了？”
“不是！你可以把每一個(gè)容器想象成一個(gè)鐵盒子，在父容器的左側(cè)有一塊強(qiáng)力磁鐵，如果右側(cè)放不下一個(gè)鐵盒，這個(gè)鐵盒會(huì)往下移動(dòng)，直到移動(dòng)到可以放下它的時(shí)候就停止下移，這是左側(cè)還有磁鐵對(duì)它的吸力，所以它還得繼續(xù)左移，直到有其他鐵盒卡住它為止。是不是有點(diǎn)暈了！我給你放個(gè)例子你看一下就明白了！”
“這里的四個(gè)容器float都是left，你可以看到，根據(jù)mainContainer里面子容器的順序先放b21，然后放b31，因?yàn)楫?dāng)前空余一半的位置，所以b31輕松靠在了b21的右邊，第三個(gè)要放的是b41，由于b21的寬度加b31的寬度為1/2+1/3，剩余的位置不足以放置b41，所以b41會(huì)往下走，當(dāng)它下移超過(guò)b31高度以后剩余的空間可以放它，因此它繼續(xù)向右靠直到被b21卡住為止。”
“小白，我舉的這個(gè)例子是特例，在實(shí)際使用的時(shí)候，我們的子容器寬度沒(méi)這么亂，一般子容器的寬度、高度都一樣。所以排列出來(lái)都是很規(guī)整的。”
“今天我們討論float屬性的時(shí)候，容器的margin、padding、border的值都是默認(rèn)為0的，如果子容器的這三個(gè)屬性有值，在占位的時(shí)候還得考慮把這些值加上，你一會(huì)兒做練習(xí)的時(shí)候嘗試把這些值加上進(jìn)行測(cè)試。哦～還有件事，我給你其中一個(gè)子容器的css代碼做個(gè)參考。不要忘了練習(xí)的時(shí)候把float為right的情況也練習(xí)練習(xí)哦～”
想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白H5成長(zhǎng)之路》的動(dòng)力！
前在項(xiàng)目的過(guò)程中遇到了一個(gè)問(wèn)題，某個(gè) div 希望始終顯示在最上面，而在之后的元素都顯示在它之下，當(dāng)時(shí)設(shè)置了 z-index 也沒(méi)有效果，不知道什么原因，因此找了一下 CSS 相關(guān)資料，解決了這個(gè)問(wèn)題的同時(shí)，也學(xué)習(xí)了很多知識(shí)，特此和大家分享一下。
屏幕是一個(gè)二維平面，然而 HTML 元素卻是排列在三維坐標(biāo)系中， x 為水平方向， y 為垂直方向， z為屏幕由內(nèi)向外方向，我們?cè)诳雌聊坏臅r(shí)候是沿著 z 軸方向從外向內(nèi)的。由此，元素在用戶視角就形成了層疊的關(guān)系，某個(gè)元素可能覆蓋了其他元素也可能被其他元素覆蓋；
這里有幾個(gè)重要的概念：層疊上下文 (堆疊上下文, Stacking Context)、層疊等級(jí) (層疊水平, Stacking Level)、層疊順序 (層疊次序, 堆疊順序, Stacking Order)、z-index、BFC（塊級(jí)格式化上下文，Block Formatting Context），這些概念共同決定了你看到元素的位置，下面我們就圍繞著這幾個(gè)概念來(lái)一起學(xué)習(xí)一下。
聲明：
1. 層疊上下文 (Stacking Context)
層疊上下文 (堆疊上下文, Stacking Context)，是 HTML 中一個(gè)三維的概念。在 CSS2.1 規(guī)范中，每個(gè)元素的位置是三維的，當(dāng)元素發(fā)生層疊，這時(shí)它可能覆蓋了其他元素或者被其他元素覆蓋；排在 z 軸越靠上的位置，距離屏幕觀察者越近。
文章 <關(guān)于z-index 那些你不知道的事> 有一個(gè)很好的比喻，這里引用一下；
可以想象一張桌子，上面有一堆物品，這張桌子就代表著一個(gè)層疊上下文。如果在第一張桌子旁還有第二張桌子，那第二張桌子就代表著另一個(gè)層疊上下文。現(xiàn)在想象在第一張桌子上有四個(gè)小方塊，他們都直接放在桌子上。在這四個(gè)小方塊之上有一片玻璃，而在玻璃片上有一盤水果。這些方塊、玻璃片、水果盤，各自都代表著層疊上下文中一個(gè)不同的層疊層，而這個(gè)層疊上下文就是桌子。
每一個(gè)網(wǎng)頁(yè)都像一個(gè)房間，這個(gè)房間就是 <html></html>，其他層疊上下文就像這個(gè)房間里的桌子，HTML 標(biāo)簽中的一切都被置于這個(gè)房間中。
當(dāng)給一個(gè)元素的 position 值賦為 fixed 或 sticky 值時(shí)，你就創(chuàng)建了一個(gè)新的層疊上下文，其中有著獨(dú)立于頁(yè)面上其他層疊上下文和層疊層的層疊層，這就相當(dāng)于你把另一張桌子帶到了房間里。
層疊上下文 1 (Stacking Context 1)是由文檔根元素形成的， 層疊上下文 2 和 3 (Stacking Context 2, 3) 都是層疊上下文 1 (Stacking Context 1) 上的層疊層。他們各自也都形成了新的層疊上下文，其中包含著新的層疊上下文。
在層疊上下文中，其子元素按照上面解釋的規(guī)則進(jìn)行層疊。形成層疊上下文的方法有：
總結(jié):
2. 層疊等級(jí) (Stacking Level)
層疊等級(jí) (層疊水平, Stacking Level) 決定了在同一個(gè)層疊上下文中，元素在 z 軸上的顯示的順序；
對(duì)于普通元素的層疊水平探討只局限于在當(dāng)前層疊上下文中：
層疊上下文本身是一個(gè)強(qiáng)力的「層疊結(jié)界」，普通的元素水平是無(wú)法突破這個(gè)結(jié)界和結(jié)界外的元素去較量層疊水平的。
— CSS 世界
另外，層疊等級(jí)并不一定由 z-index 決定，只有定位元素的層疊等級(jí)才由 z-index 決定，其他類型元素的層疊等級(jí)由層疊順序、他們?cè)?HTML 中出現(xiàn)的順序、他們的祖先元素的層疊等級(jí)一同決定，詳細(xì)的規(guī)則見下面層疊順序的介紹。
3. z-index
在 CSS 2.1 中, 所有的盒模型元素都處于三維坐標(biāo)系中。除了我們常用的橫坐標(biāo)和縱坐標(biāo)， 盒模型元素還可以沿著「z 軸」層疊擺放，當(dāng)他們相互覆蓋時(shí)，z 軸順序就變得十分重要。
-- CSS 2.1 Section 9.9.1 - Layered presentation
z-index 只適用于定位的元素，對(duì)非定位元素?zé)o效，它可以被設(shè)置為正整數(shù)、負(fù)整數(shù)、 0、 auto，如果一個(gè)定位元素沒(méi)有設(shè)置 z-index，那么默認(rèn)為 auto；
元素的 z-index 值只在同一個(gè)層疊上下文中有意義。如果父級(jí)層疊上下文的層疊等級(jí)低于另一個(gè)層疊上下文的，那么它 z-index 設(shè)的再高也沒(méi)用。所以如果你遇到 z-index 值設(shè)了很大，但是不起作用的話，就去看看它的父級(jí)層疊上下文是否被其他層疊上下文蓋住了。
4. 層疊順序 (Stacking Order)
層疊順序 (層疊次序, 堆疊順序, Stacking Order) 描述的是元素在同一個(gè)層疊上下文中的順序規(guī)則（之前的層疊上下文和層疊等級(jí)是概念），從層疊的底部開始，共有七種層疊順序：
第 7 級(jí)順序的元素會(huì)顯示在之前順序元素的上方，也就是看起來(lái)覆蓋了更低級(jí)的元素：
除層疊順序優(yōu)先級(jí)規(guī)則之外，還有一條后來(lái)居上規(guī)則：同一個(gè)層疊順序的元素按照在 HTML 里出現(xiàn)的順序依次層疊。這兩個(gè)規(guī)則共同決定瀏覽器元素在文檔中是如何層疊的。
5. 文檔流 (Document Flow)
5.1 常規(guī)流 (Normal flow)
5.2 浮動(dòng) (Floats)
5.3 絕對(duì)定位 (Absolute positioning)
6. BFC （Block Formatting Context）
6.1 什么是 BFC
BFC (Block Formatting Context) 塊級(jí)格式化上下文，是用于布局塊級(jí)盒子的一塊渲染區(qū)域，相對(duì)應(yīng)的還有 IFC（Inline Formatting Context）內(nèi)聯(lián)格式化上下文，不是本文重點(diǎn)，讀者可以自行查閱相關(guān)知識(shí)。
BFC 是 Web 頁(yè)面 CSS 視覺(jué)渲染的一部分，用于決定塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。
— MDN - 塊格式化上下文
一個(gè) BFC 的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新 BFC 的子元素的內(nèi)部元素。這從另一方角度說(shuō)明，一個(gè)元素不能同時(shí)存在于兩個(gè) BFC 中。因?yàn)槿绻粋€(gè)元素能夠同時(shí)處于兩個(gè) BFC 中，那么就意味著這個(gè)元素能與兩個(gè) BFC 中的元素發(fā)生作用，就違反了 BFC 的隔離作用。
觸發(fā) BFC 的方式有：
注意： display:table 也可以生成 BFC 的原因在于 Table 會(huì)默認(rèn)生成一個(gè)匿名的 table-cell，是這個(gè)匿名的 table-cell 生成了 BFC。
6.2 用法
1. 阻止相鄰元素的 margin 合并
屬于同一個(gè) BFC 的兩個(gè)相鄰塊級(jí)子元素的上下 margin 會(huì)發(fā)生重疊，(設(shè)置 writing-mode:tb-rl時(shí)，水平 margin 會(huì)發(fā)生重疊)。所以當(dāng)兩個(gè)相鄰塊級(jí)子元素分屬于不同的 BFC 時(shí)可以阻止 margin 重疊。可以給任一個(gè)相鄰塊級(jí)盒子的外面包一個(gè) div，通過(guò)改變此 div 的屬性使兩個(gè)原盒子分屬于兩個(gè)不同的 BFC，以此來(lái)阻止 margin 重疊。
代碼和預(yù)覽參見：Codepen - 使用BFC阻止margin合并：https://codepen.io/SHERlocked93/pen/eVOevN
2. 阻止元素被浮動(dòng)元素覆蓋
一個(gè)正常文檔流的塊級(jí)元素可能被一個(gè) float 元素覆蓋，擠占正常文檔流，因此可以設(shè)置一個(gè)元素的 float、 display、 position 值等方式觸發(fā) BFC，以阻止被浮動(dòng)盒子覆蓋。
代碼和預(yù)覽參見：Codepen - 使用BFC阻止元素被浮動(dòng)元素覆蓋：https://codepen.io/SHERlocked93/pen/pazdzB
3. 包含浮動(dòng)元素
通過(guò)改變包含浮動(dòng)子元素的父盒子的屬性值，觸發(fā) BFC，以此來(lái)包含子元素的浮動(dòng)盒子。
代碼和預(yù)覽參見：Codepen - 使用BFC包含浮動(dòng)元素：https://codepen.io/SHERlocked93/pen/OQLOqG
7. 實(shí)戰(zhàn)
下面一起來(lái)看幾個(gè)例子實(shí)戰(zhàn)一下，幫助理解。
7.1 普通情況
三個(gè) relative 定位的 div 塊中各有 absolute 的不同顏色的 span.red、 span.green、 span.blue，它們都設(shè)置了 position:absolute；
代碼和預(yù)覽參見：Codepen - 普通情況：https://codepen.io/SHERlocked93/pen/aaPord
那么當(dāng)沒(méi)有元素包含 z-index 屬性時(shí)，這個(gè)例子中的元素按照如下順序?qū)盈B（從底到頂順序）：
紅綠藍(lán)都屬于 z-index 為 auto 的定位元素，因此按照 7 層層疊順序規(guī)則來(lái)說(shuō)同屬于層疊順序第 6 級(jí)，所以按 HTML 中的出現(xiàn)順序?qū)盈B：紅->綠->藍(lán)
7.2 在相同層疊上下文的父元素內(nèi)的情況
紅綠位于一個(gè) div.first-box 下，藍(lán)位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute， first-box 與 second-box 都設(shè)置了 position:relative；
代碼和預(yù)覽參見：Codepen - 父元素不同但都位于根元素下：https://codepen.io/SHERlocked93/pen/RYENBw
這個(gè)例子中，紅藍(lán)綠元素的父元素 first-box 與 second-box 都沒(méi)有生成新的層疊上下文，都屬于根層疊上下文中的元素，且都是層疊順序第 6 級(jí)，所以按 HTML 中的出現(xiàn)順序?qū)盈B：紅->綠->藍(lán)
7.3 給子元素增加 z-index
紅綠位于一個(gè) div.first-box 下，藍(lán)黃位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute，如果這時(shí)給綠加一個(gè)屬性 z-index:1，那么此時(shí) .green 位于最上面；
如果再在 .second-box 下 .green 后加一個(gè)絕對(duì)定位的 span.gold，設(shè)置 z-index:-1，那么它將位于紅綠藍(lán)的下面；
代碼和預(yù)覽參見：Codepen - 設(shè)置了z-index：https://codepen.io/SHERlocked93/pen/gdZOrK
這個(gè)例子中，紅藍(lán)綠黃元素的父元素中都沒(méi)有生成新的層疊上下文，都屬于根層疊上下文中的元素
所以這個(gè)例子中的從底到高顯示的順序就是：黃->紅->藍(lán)->綠
7.4 在不同層疊上下文的父元素內(nèi)的情況
紅綠位于一個(gè) div.first-box 下，藍(lán)位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute，如果 first-box 的 z-index 設(shè)置的比 second-box 的大，那么此時(shí)無(wú)論藍(lán)的 z-index 設(shè)置的多大 z-index:999，藍(lán)都位于紅綠的下面；如果我們只更改紅綠的 z-index 值，由于這兩個(gè)元素都在父元素 first-box 產(chǎn)生的層疊上下文中，此時(shí)誰(shuí)的 z-index 值大，誰(shuí)在上面；
代碼和預(yù)覽參見：Codepen - 不同層疊上下文的父元素：https://codepen.io/SHERlocked93/pen/gdZbOJ
這個(gè)例子中，紅綠藍(lán)都屬于設(shè)置了 z-index 的定位元素，不過(guò)他們的父元素創(chuàng)建了新的層疊上下文；
所以這個(gè)例子中從低到到顯示的順序：藍(lán)->紅->綠
(我遇到的的情況就屬于這個(gè)例子類似情形)
7.5 給子元素設(shè)置 opacity
紅綠位于 div.first-box 下，藍(lán)位于 div.second-box 下，紅綠藍(lán)都設(shè)置了 position:absolute，綠設(shè)置了 z-index:1，那么此時(shí)綠位于紅藍(lán)的最上面；
如果此時(shí)給 first-box 設(shè)置 opacity:.99，這時(shí)無(wú)論紅綠的 z-index 設(shè)置的多大 z-index:999，藍(lán)都位于紅綠的上面；
如果再在 .second-box 下 .green 后加一個(gè) span.gold，設(shè)置 z-index:-1，那么它將位于紅綠藍(lán)的下面；
代碼和預(yù)覽參見：Codepen - opacity的影響：https://codepen.io/SHERlocked93/pen/GXPRWB
之前已經(jīng)介紹了，設(shè)置 opacity 也可以形成層疊上下文，因此：
所以這個(gè)例子中從低到到顯示的順序：黃->紅->綠->藍(lán)
關(guān)注微信公眾號(hào)：安徽思恒信息科技有限公司,了解更多技術(shù)內(nèi)容……
布局是我們前端開發(fā)中不可避免的，簡(jiǎn)單回憶一下 css 的布局方案，供大家參考以及自己參閱。
這里的居中布局是不定寬度為前提，固定寬度情況也包含其中。
.parent {
text-align: center;
}
.child {
display: inline-block;
}
復(fù)制代碼這個(gè)方案的兼容性比較好，可兼容到 IE8，對(duì)于 IE567 不支持inline-block,需要使用 css hack 進(jìn)行兼容。
.child {
display: table;
margin: 0 auto;
}
復(fù)制代碼這個(gè)方案兼容到 IE8，可以使用
代替 css 寫法，兼容性更好。
.parent {
position:relative;
height:1.5em;
}
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
復(fù)制代碼這個(gè)方案兼容到 IE9，因?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">transform兼容性導(dǎo)致，如果.child為定寬元素，可以使用以下寫法，提高兼容性。
.parent {
position: relative;
height:1.5em;
}
.child {
position: absolute;
width:100px;
left:50%;
margin-left:-50px;
}
復(fù)制代碼.parent {
display:flex;
justify-content;
}
.child {
margin:0 auto;
}
復(fù)制代碼flex 布局很強(qiáng)大，但是受到兼容的限制。不考慮兼容可以大膽使用。
.parent {
display: table-cell;
vertical-align: middle;
}
復(fù)制代碼此方案可以用
替換，提高兼容性。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
復(fù)制代碼css3 新屬性兼容性不是很好。
.parent {
display: flex;
align-items: center;
}
復(fù)制代碼兼容性不是很好,不考慮低版本瀏覽器。
.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
復(fù)制代碼兼容到 IE8.
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
復(fù)制代碼兼容性差，兼容 IE10 以上
.parent{
display: flex;
justify-content: center;
align-items: center;
}
復(fù)制代碼兼容差
.left{
float: left;
width: 100px;
}
.right{
margin-left: 120px;
}
復(fù)制代碼此方案對(duì)于定寬布局比較好，不定寬布局推薦下面方法 2.
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
復(fù)制代碼此方案不管是多列定寬或是不定寬，都可以完美實(shí)現(xiàn)，同時(shí)可以實(shí)現(xiàn)等高布局。
.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
復(fù)制代碼.parent{
display: flex;
}
.left{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
復(fù)制代碼.left,.center{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
復(fù)制代碼.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.center,.right{
display: table-cell;
}
.right{
width: 100px;
padding-right: 20px;
}
復(fù)制代碼.parent{
display: flex;
}
.left,.center{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
復(fù)制代碼.left{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p{width: 200px;}
復(fù)制代碼.parent{
display: table; width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%;
padding-right: 20px;
}
.left p{width:200px;}
復(fù)制代碼.parent{
display: flex;
}
.left{
margin-right: 20px;
}
.right{
flex: 1;
}
.left p{width: 200px;}
復(fù)制代碼.left,.center{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p,.center p{
width: 100px;
}
復(fù)制代碼.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
復(fù)制代碼.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
復(fù)制代碼.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
復(fù)制代碼.parent{
overflow: hidden;
}
.left,.right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left{
float: left; width: 100px;
}
.right{
overflow: hidden;
}
復(fù)制代碼.parent{
display: table;
width: 100%;
}
.left{
display:table-cell;
width: 100px;
margin-right: 20px;
}
.right{
display:table-cell;
}
復(fù)制代碼.parent{
display:flex;
width: 100%;
}
.left{
width: 100px;
}
.right{
flex:1;
}
復(fù)制代碼.main {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
display: inline-block;
}
.empty{
height: 0;
visibility: hidden;
}
復(fù)制代碼<div class="container">
<div class="header">header</div>
<div class="wrapper clearfix">
<div class="main col">main</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</div>
.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
復(fù)制代碼<div class="container">
<div class="header">header</div>
<div class="wrapper clearfix">
<div class="main col">
<div class="main-wrap">main</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</div>
.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
復(fù)制代碼<div class="header">header</div>
<div class="wrapper">
<div class="main col">
main
</div>
<div class="left col">
left
</div>
<div class="right col">
right
</div>
</div>
<div class="footer">footer</div>
.wrapper { position: relative; }
.main { margin:0 100px;}
.left { position: absolute; left: 0; top: 0;}
.right { position: absolute; right: 0; top: 0;}
復(fù)制代碼鏈接：https://juejin.cn/post/6906328075353456654
作者：water
來(lái)源：掘金
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
