整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
么是浮動塌陷？
當子元素設置浮動時，父元素中所有孩子盒子都是float，則父容器的高度為0。
1.在父親盒子中的最下邊添加一個空div盒子，并設置clear為相應的值，如果不清除塌陷，那么父元素高度為0，給ul設置高度就沒有效果。
clear常見取值如下：
left：清除左側浮動引起的塌陷；
right：清除右側浮動引起的塌陷；
both：清除左右兩側浮動引起的塌陷。
2.
天小編為大家介紹五種css樣式布局以及內服源代碼作為介紹，采用的方式是行內級樣式（就是將css樣式代碼與html寫在一起）
已知布局元素的高度，寫出三欄布局，要求左欄、右欄寬度各為300px，中間自適應。
一、浮動布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮動布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮動布局
</div>
</div>
</body>
</html>
浮動布局的兼容性比較好，但是浮動帶來的影響比較多，頁面寬度不夠的時候會影響布局。
二、絕對定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
絕對定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>
絕對定位布局快捷，但是有效性比較差，因為脫離了文檔流。
三、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>
自適應好，高度能夠自動撐開
四、table-cell表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
兼容性好，但是有時候不能固定高度，因為會被內容撐高。
五、網格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
網格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
希望大家可以一直關注我，支持我！感謝！！！
篇文章我們說了元素的浮動，本篇文章主要介紹下css浮動帶來的影響，以及如何清除浮動。
細心的人可能發現了，在我們上篇文章寫的導航條中存在一個問題，那就是使用了float之后，父級盒子的高度變為0了。我們來寫一個例子來看一下，創建一個父級div，并設置border屬性，然后下邊創建兩個子元素span，并設置浮動。具體代碼如下所示：
由上圖可以看出，在給span添加了float之后，父級元素div的高度就變成了0。我們有以下幾種方式來解決這個問題
原理：如果父級元素沒有定義高度，父元素的高度完全由子元素撐開時，父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握。
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題。對于響應式布局會有很大影響。
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度。
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，不利于頁面的優化。
原理：元素生成偽類的作用和效果相當于方法2中的原理，但是IE8以上和非IE瀏覽器才支持:after，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題，寫法是固定的，不理解也可以直接復制使用；（小編大力推薦使用此種方法，簡單便捷，只需添加一個class即可解決問題）
缺點：css代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。（不建議使用此種方式，可能會影響頁面元素布局）
好了，本篇文章就給大家說到這里，大家自己下來可以這幾種方式都試一試，自己感覺下哪種更適合自己，小編一直使用的是第3種方式。
每日金句：這次本來可以咸魚翻身的，沒想到粘鍋了。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
