么是浮動塌陷?
當子元素設置浮動時,父元素中所有孩子盒子都是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小時內與您取得聯系。