常用頁面佈局技術
阿新 • • 發佈：2019-01-01
一.自適應三列布局
1.使用絕對定位
<div id="center">中列</div> <div id="left">左列</div> <div id="right">右列</div> body,html{ height:100%; padding: 0px; margin:0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 100px; position: absolute; top: 0px; left: 0px;} #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 102px; margin-left: 102px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 100px; position: absolute; top: 0px; right: 0px;} (1)處於頁面優化考慮，應先載入中間主體區塊再依次載入左右側兩列列，所以中間主體區塊div要寫在左右側兩列區塊div前面. (2)該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
2.浮動：
<style> //CSS reset body,html { height:100%; padding: 0; margin: 0 } #left,#right { float: left; width: 220px; height: 200px; background: blue; } #right{ float: right; } #main { margin: 0 230px; background: red; height: 200px; } </style> </head> <body> <div id="left">left </div> <div id="right">right</div> <div id="main">mian</div> </body> </html> 這是一種比較便利的實現方式，無需額外的元素輔助定位，同時相容性也比較優秀。但有一個缺點就是該佈局方式只能實現左右兩列寬度固定，中間自適應這一種三列布局，靈活性不強。
3.雙飛翼佈局
<style> *{ margin: 0; padding: 0; } .main,.left,.right{ height: 300px; font: 20px/300px; color: #fff; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin: 0 300px 0 200px; background-color: black; } .left{ width: 200px; float: left; margin-left: -100%; background-color: red; } .right{ width: 300px; float: left; margin-left: -300px; background-color: blue; } </style> </head> <body> <div class="main"> <div class="content">中間主體區域寬度自適應</div> </div> <div class="left">左側定寬200px</div> <div class="right">右側定寬300px</div> </body> 增加多一個div就可以不用相對佈局了，只用到了浮動和負邊距。
跟上潮流，試試 flex
<style> .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; background-color: green; } .HolyGrail-nav, .HolyGrail-ads { /* 兩個邊欄的寬度設為12em */ flex: 0 0 200px; background-color: blue; } .HolyGrail-nav { /* 導航放到最左邊 */ order: -1; background-color: grey; } </style> </head> <body> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div> </body> flex 佈局中不能將被定位的元素寬度或高度設定為 100%，這樣會影響其他定值大小的元素。那麼該如何設定中間元素的寬度呢，flex: 1; 即可.
二.水平居中與垂直居中
1.水平居中
（1）CSS3如何實現元素水平居中
<1>行內元素如果被設定元素為文字、圖片等行內元素時，水平居中是通過給父元素設定 text-align:center 來實現的.
div{
border:1px solid red;
}
div.txtCenter{
text-align:center;
}
div.imgCenter{
text-align:center;
}
<div class="txtCenter">我是文字，哈哈，我想要在父容器中水平顯示居中</div>
<div class="imgCenter">
<img src="http://www.baidu.com/img/bd_logo1.png"></div>
<2>定寬塊狀元素
當被設定元素為塊狀元素時用 text-align：center 就不起作用了。滿足定寬和塊狀兩個條件的元素是可以通過設定“左右margin”值為“auto”來實現居中的。
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。
設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
div{
border:1px solid red;
width:500px;
margin: 10px auto;
}
<div class="txtCenter">我是定寬塊狀元素，哈哈，我要水平居中</div>
<3>在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。
<1>不定寬塊狀元素1
1）為需要設定的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。
2）為這個 table 設定“左右 margin 居中。
table{
margin:0 auto;
}
ul{
list-style:none;margin:0;padding:0;
}
li{
float:left;display:inline;margin-right:8px;
}
.wrap{
background:#ccc;
}
注意：display:inline 的作用是設定物件做為行內元素顯示，inline是內聯物件的預設值（ps:內聯物件就是不自動產生換行的元素，比如span） 而我們一般用的div是塊級元素，預設display屬性是block, 但將div的display設定為inline的話，則多個div可以象span一樣顯示在一行了。
<2> 不定寬塊狀元素2
改變塊級元素的 dispaly 為 inline 型別，然後使用 text-align:center 來實現居中效果
.container {text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline ;
}
.container li{margin-right:8px;display:inline; }
<3>不定寬塊狀元素3
通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:-50% 來實現水平居中
.wrap{
float:left;
position:relative;
left:50%;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">不定寬塊狀元素水平居中方法3</div>
</div>
2.垂直居中
(1)父元素高度確定的單行文字
垂直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的.
.wrap{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
<div class="wrap">
<h2>父元素告訴確定的單行文字垂直居中</h2>
</div>
(2)說到豎直居中，css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效
(3)父元素高度確定的多行文字1
使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle（因為 td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定了）
.wrap{
height:300px;
background:#ccc;
}
<table><tbody><tr><td class="wrap">
<div>
<img src="" alt="害羞的小怒海">
</div>
</td></tr></tbody></table>
(4)父元素高度確定的多行文字2
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設定塊級元素的 display:table-cell， vertical-align:middle，但注意 IE6、7 並不支援這個樣式。
.container{
height:300px;
background:red;
display:table-cell;
vertical-align:middle;
}
<div class="container">
<img src="https://p1.ssl.qhimg.com/t01e41b648b394bca10.png">
</div>
三.CSS3彈性佈局
隨著響應式使用者介面的流行，Web 應用一般都要求適配不同的裝置尺寸和瀏覽器解析度。響應式使用者介面設計中最重要的一環就是佈局。需要根據視窗尺寸來調整佈局，從而改變元件的尺寸和位置，以達到最佳的顯示效果。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的工作。在該佈局模型中，容器會根據佈局的需要，調整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。當容器的尺寸由於螢幕大小或視窗尺寸發生變化時，其中包含的條目也會被動態地調整。比如當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制，可以由開發人員自由操作
響應式Web設計(Responsive Web design)的理念是:
頁面的設計與開發應當根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。無論使用者正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關指令碼功能等，以適應不同裝置;換句話說，頁面應該有能力去自動響應使用者的裝置環境。響應式網頁設計就是一個網站能夠相容多個終端--而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新裝置做專門的版本設計和開發了。
1.基本佈局
簡單的圖片縮圖預覽頁面的 HTML 程式碼
<ul class="flex-container">
<li class="flex-item"><img src="//placehold.it/300&text=1"></li>
<li class="flex-item"><img src="//placehold.it/300&text=2"></li>
<li class="flex-item"><img src="//placehold.it/300&text=3"></li>
<li class="flex-item"><img src="//placehold.it/300&text=4"></li>
<li class="flex-item"><img src="//placehold.it/300&text=5"></li>
<li class="flex-item"><img src="//placehold.it/300&text=6"></li>
</ul>
.flex-container {
list-style: none;
display: flex;
flex-direction: row;
fex-wrap: wrap;
}
.flex-item {
padding: 5px;
}
用"display: flex"宣告使用彈性盒佈局。CSS 屬性宣告"flex-direction"用來確定主軸的方向，從而確定基本的條目排列方式。
表 1. “flex-direction”屬性的可選值及其含義
屬性值 含義
row（預設值） 主軸為水平方向。排列順序與頁面的文件順序相同。如果文件順序是 ltr，則排列順序是從左到右；如果文件順序是 rtl，則排列順序是從右到左。
row-reverse 主軸為水平方向。排列順序與頁面的文件順序相反。
column 主軸為垂直方向。排列順序為從上到下。
column-reverse 主軸為垂直方向。排列順序從下到上.
預設情況下，彈性盒容器中的條目會盡量佔滿容器在主軸方向上的一行。當容器的主軸尺寸小於其所有條目總的主軸尺寸時，會出現條目之間互相重疊或超出容器範圍的現象。CSS 屬性"flex-wrap"用來聲明當容器中條目的尺寸超過主軸尺寸時應採取的行為。"flex-wrap"屬性的可選值及其含義如表2所示。
屬性值 含義
nowrap（預設值） 容器中的條目只佔滿容器在主軸方向上的一行，可能出現條目互相重疊或超出容器範圍的現象。
wrap 當容器中的條目超出容器在主軸方向上的一行時，會把條目排列到下一行。下一行的位置與交叉軸的方向一致。
wrap-reverse 與 wrap 的含義類似，不同的是下一行的位置與交叉軸的方向相反。
可以使用"flex-flow"屬性把"flex-direction"和"flex-wrap"結合起來，
清單 3. “flex-flow”屬性的使用示例
flex-flow: row wrap;
2.容器中的條目
（1）條目的順序
預設情況下，容器中條目的順序取決於它們在 HTML 標記程式碼中的出現順序。可以通過"order"屬性來改變條目在容器中的出現順序。
例如：
.flex-item:last-child {
order: -1;
}
"order"屬性的主要作用是兼顧頁面的樣式和可訪問性。支援可訪問性的裝置，如螢幕閱讀器，都是按照 HTML 中程式碼的順序來讀取元素的。這就要求一些相對重要的文字出現在 HTML 標記的前面。而對於使用瀏覽器的一般使用者來說，在某些情況下把一些相對不重要的圖片顯示在前面是更好的選擇。比如在一個商品的展示頁面中，在原始碼中把商品描述的文字放在商品圖片之前。這樣可以方便螢幕閱讀器的讀取；而在 CSS 中使用"order"屬性把圖片放在文字的前面。這樣可以讓使用者首先看到圖片。
（2）條目尺寸的彈性
彈性盒佈局模型的核心在於容器中條目的尺寸是彈性的。容器可以根據本身尺寸的大小來動態地調整條目的尺寸。當容器中有空白空間時，條目可以擴充套件尺寸以佔據額外的空白空間；當容器中的空間不足時，條目可以縮小尺寸以防止超出容器範圍。條目尺寸的彈性由 3 個 CSS 屬性來確定，分別是"flex-basis"、"flex-grow"和"flex-shrink"。
"flex-basis"屬性宣告接受的值與"width"屬性是一樣的，用來確定彈性條目的初始主軸尺寸。這是條目的尺寸被容器調整之前的初始值。如果"flex-basis"的值為 auto，則實際使用的值是主軸尺寸屬性的值，即 width 或 height 屬性的值。如果主軸尺寸屬性的值也是 auto，則使用的值由條目內容的尺寸來確定。
"flex-grow"屬性的值是一個沒有單位的非負數，預設值是 1。"flex-grow"屬性的值表示的是當容器有多餘的空間時，這些空間在不同條目之間的分配比例。比如，一個容器中有 3 個條目，其"flex-grow"屬性的值分別為 1，2 和 3，那麼當容器中有空白空間時，這 3 個條目所獲得的額外空白空間分別佔全部空間的 1/6、1/3 和 1/2，如程式碼清單 5所示。
.flex-item:nth-child(1) {
flex-grow: 1;
}
.flex-item:nth-child(2) {
flex-grow: 2;
}
.flex-item:nth-child(3) {
flex-grow: 3;
}
"flex-shrink"屬性在使用上類似於"flex-grow"。該屬性的值也是無單位的，表示的是當容器的空間不足時，各個條目的尺寸縮小的比例。在進行尺寸縮小時，條目的縮小比例與"flex-basis"的值相乘之後，就得到了應該縮小的尺寸的實際值。例如，在容器中有 3 個條目，其"flex-shrink"屬性的值分別為 1，2 和 3。每個條目的主軸尺寸均為 200px。當容器的主軸尺寸不足 600px 時，比如變成了 540px 之後， 則需要縮小的尺寸 60px 由 3 個條目按照比例來分配。3 個條目分別要縮小 10px、20px 和 30px，主軸尺寸分別變為 190px、180px 和 170px。預覽的頁面見這裡。
使用屬性"flex"可以同時宣告"flex-basis"、"flex-grow"和"flex-shrink"的值，格式是"none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"。該屬性的值的 3 個組成部分的初始值分別是"0 1 auto"。當屬性"flex"的值為 none 時，相當於"0 0 auto"。當組成部分"flex-basis"被省略時，其值為 0%。程式碼清單 6給出了屬性"flex"的使用示例。
.flex-item:nth-child(1) {
flex: 1 1 auto;
}
flex: 1; // flex-grow 的值為 1，flex-shrink 的值為 1，flex-basis 的值為 0%。
需要注意的是，在容器分配額外空間時是以"行"為單位的。容器先根據"flex-wrap"的屬性值來確定是單行佈局或多行佈局，然後把條目分配到對應的行中，最後在每一行內進行空白空間的分配。如程式碼清單 7中的 CSS 宣告示例，
.flex-container {
width: 990px;
}
.flex-item {
width: 300px;
flex: auto;
}
由於容器的寬度只有 990px，所以在一行中只能排列 3 個條目，而剩下的 1 個條目則會被排列到單獨的一行中。在 3 個條目的行中，多餘的空間 90px 被平均分配給 3 個條目；而在一個條目單獨的行中，多餘的 690px 被該條目完全佔據。
（3）條目對齊
第一種方式是使用自動空白邊，即"margin: auto"。在使用自動空白邊時，容器中額外的空白空間會被宣告為 auto 的空白邊佔據，如程式碼清單 8所示。CSS 宣告 profile 中通過"margin-left: auto"使得該條目左邊的空白邊會佔據額外的空間，從而"Profile"文字會靠右顯示。
<div class="flex-container">
<div class="logo">Logo</div>
<div class="profile">Profile</div>
</div>
.flex-container {
display: flex;
}
.profile {
margin-left: auto;
}
第二種方式是在主軸方向上的對齊。這是通過容器上的"justify-content"屬性來進行設定，可以調整條目在主軸方向上的對齊方式。這種條目對齊方式的調整發生在修改條目的彈性尺寸和處理自動空白邊之後。當容器中的一行中的條目沒有彈性尺寸，或是已經達到了它們的最大尺寸時，在這一行上可能還有額外的空白空間。使用"justify-content"屬性可以分配這些空間。該屬性還可以控制當條目超出行的範圍時的對齊方式。"justify-content"屬性的可選值和含義如表3所示，
表 3. “justify-content”屬性的可選值和含義
屬性值 含義
flex-start 條目集中於該行的起始位置。第一個條目與其所在行在主軸起始方向上的邊界保持對齊，其餘的條目按照順序依次排列。
flex-end 條目集中於該行的結束方向。最後一個條目與其所在行在主軸結束方向上的邊界保持對齊，其餘的條目按照順序依次排列。
center 條目集中於該行的中央。條目都往該行的中央排列，在主軸起始方向和結束方向上留有同樣大小的空白空間。如果空白空間不足，則條目會在兩個方向上超出同樣的空間。
space-between 第一個條目與其所在行在主軸起始方向上的邊界保持對齊，最後一個條目與其所在行在主軸結束方向上的邊界保持對齊。空白空間在條目之間平均分配，使得相鄰條目之間的空白尺寸相同。
space-around 類似於 space-between，不同的是第一個條目和最後一個條目與該行的邊界之間同樣存在空白空間，該空白空間的尺寸是條目之間的空白空間的尺寸的一半。
第三種方式是交叉軸方向上的對齊。除了在主軸方向上對齊之外，條目也可以在交叉軸方向上對齊。容器上的屬性"align-items"用來設定容器中所有條目在交叉軸上的預設對齊方向，而條目上的屬性"align-self"用來覆寫容器指定的對齊方式。屬性"align-items"的可選值和含義如表4所示，實際的佈局效果見圖 3。
表 4. 屬性“align-items”的可選值和含義
屬性值 含義
flex-start 條目與其所在行在交叉軸起始方向上的邊界保持對齊。
flex-end 條目與其所在行在交叉軸結束方向上的邊界保持對齊。
center 條目的空白邊盒子（margin box）在交叉軸上居中。如果交叉軸尺寸小於條目的尺寸，則條目會在兩個方向上超出相同大小的空間。
baseline 條目在基準線上保持對齊。在所有條目中，基準線與交叉軸起始方向上的邊界距離最大的條目，它與所在行在交叉軸方向上的邊界保持對齊。
stretch 如果條目的交叉軸尺寸的計算值是"auto"，則其實際使用的值會使得條目在交叉軸方向上儘可能地佔滿。
屬性"align-self"的可選值除了表中列出的之外，還可以設定為"auto"。當"align-self"的值為 auto 時，其計算值是父節點的屬性"align-items"的值。如果該節點沒有父節點，則計算值為"stretch"。
四.一行文字省略號與多行文字省略號
1.一行文字省略號
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！
</p>
(1)text-overflow: ellipsis;
簡單理解就是我要把文字限制在一行（white-space: nowrap;），肯定這一行是有限制的(width)，並且你的溢位的部分要隱藏起來（overflow: hidden；），然後出現省略號（ text-overflow: ellipsis）。
(2)white-spaceoverflow: hidden；
下面是wschool上white-space可能的值：
normal 預設。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合併空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
2.多行文字省略號
(1)直接使用WebKit的CSS擴充套件屬性(WebKit是私有屬性)-webkit-line-clamp ；
注意：這是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
-webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的WebKit屬性。
常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
text-overflow: ellipsis;，可以用來多行文字的情況下，用省略號“…”隱藏超出範圍的文字 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器。
(2)跨瀏覽器相容的方案
比較靠譜簡單的做法就是設定相對定位的容器高度，用包含省略號(…)的元素模擬實現；
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}
<p>WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
這裡注意幾點：
1.height高度真好是line-height的3倍；
2.結束的省略好用了半透明的png做了減淡的效果，或者設定背景顏色；
3.IE6-7不顯示content內容，所以要相容IE6-7可以是在內容中加入一個標籤，比如用<span class="line-clamp">...</span>去模擬；
4.要支援IE8，需要將::after替換成:after；
(3)JavaScript 方案
用js也可以根據上面的思路去模擬，實現也很簡單，推薦幾個做類似工作的成熟小工具
<1>Clamp.js
下載及文件地址：https://github.com/josephschmitt/Clamp.js
使用也非常簡單：
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});
<2>jQuery外掛-jQuery.dotdotdotjQuery外掛-jQuery.dotdotdot
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
});
五.清除浮動
浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤、父級標籤的位置及 width height 屬性。而且同樣的程式碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽器相容性方面還有問題。
下面總結8種清除浮動的方法（測試已通過 ie chrome firefox opera，後面三種方法只做瞭解就可以了）：
1.父級div定義 height
程式碼如下:
.div1{background:#000080;border:1px solid red;/解決程式碼/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
Left
Right
div2
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、程式碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
2.結尾處加空div標籤 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動程式碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3.父級div定義 偽類:after 和 zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動程式碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援。
建議：推薦使用，建議定義公共類，以減少CSS程式碼。
4.父級div定義 overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
5.父級div定義 overflow:auto
.div1{background:#000080;border:1px solid red;/解決程式碼/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的程式碼不會出現滾動條就使用吧。
6.父級div 也一起浮動
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決程式碼*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：所有程式碼一起浮動，就變成了一個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作瞭解。
7.父級div定義 display:table
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題。
建議：不推薦使用，只作瞭解。
8.結尾處加 br標籤 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標籤 clear:both
建議：不推薦使用，只作瞭解。
六.程式碼reset
1.CSS Reset是什麼？
在HTML標籤在瀏覽器裡有預設的樣式，例如 p 標籤有上下邊距，strong標籤有字型加粗樣式，em標籤有字型傾斜樣式。不同瀏覽器的預設樣式之間也會有差別，例如ul預設帶有縮排的樣式，在IE 下，它的縮排是通過margin實現的，而Firefox下，它的縮排是由padding實現的。在切換頁面的時候，瀏覽器的預設樣式往往會給我們帶來麻 煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的預設樣式全部去掉，更準確說就是通過重新定義標籤樣式。“覆蓋”瀏覽器的CSS預設屬性。最最簡 單的說法就是把瀏覽器提供的預設樣式覆蓋掉！這就是CSS reset。
2.為什麼要重置它？
因為瀏覽器的品種很多，每個瀏覽器的預設樣式也是不同的，比如標籤，在IE瀏覽器、Firefox瀏覽器以及Safari瀏 覽器中的樣式都是不同的，所以，通過重置button標籤的CSS屬性，然後再將它統一定義，就可以產生相同的顯示效果。
3.下面是經常使用的重置程式碼：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, em, p, font, img, small, strong, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:12px;vertical-align:baseline}
ol, ul {list-style:none} :focus {outline:none; }
table {border-collapse:collapse;border-spacing: 0}
caption, th, td { text-align: left; font-weight: normal}
strong {font-weight:600}
a{font:12px Arial;text-decoration:none;color:#404040;cursor:pointer;}
a:hover{text-decoration:underline;color:#FF3300}
h1{font-size:16px;font-weight:600;color:#666} .left{float:left} .right{float:right} .clear{clear:both}