子元素浮動讓父元素塌陷解決辦法
父元素沒有給固定高度，子元素設有固定的高度，但是父雲素也沒有被子元素的高度撐開。子元素浮動了，而浮動屬性會使元素脫離文件流，即子元素設定float屬性後，當前的html文件會當作元素不存在一樣，所以可以看作父元素內根本沒有內容，高度當然也就撐不開。
解決辦法：
1.設定父元素float屬性；這樣，父元素也是脫離當前文件流，子元素和父元素一起脫離，並且子元素仍在父元素內，父元素內容不空了，所以高度會適應子元素高度。
2.不要浮動，子元素使用display:inline-block;
3.在最後一個設定浮動的子元素後加一個空div，清除浮動；
4.父元素設定overflow：hidden屬性；
5 .使用after偽物件清除浮動 ；
推薦後面3種方法。
針對方案4還可以這樣：
如果在父元素內要左右排列且不讓父元素坍塌，可以這樣改，將左邊的子類設定為float，右邊的子類設定為overflow：hidden屬性。如下程式碼所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.left{
float:left;
width:200px;
margin-right: 20px;
background-color - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 頂
- 0
- 踩
父元素沒有給固定高度，子元素設有固定的高度，但是父雲素也沒有被子元素的高度撐開。子元素浮動了，而浮動屬性會使元素脫離文件流，即子元素設定float屬性後，當前的html文件會當作元素不存在一樣，所以可以看作父元素內根本沒有內容，高度當然也就撐不開。
解決辦法：
1.設定父元素float屬性；這樣，父元素也是脫離當前文件流，子元素和父元素一起脫離，並且子元素仍在父元素內，父元素內容不空了，所以高度會適應子元素高度。
2.不要浮動，子元素使用display:inline-block;
3.在最後一個設定浮動的子元素後加一個空div，清除浮動；
4.父元素設定overflow：hidden屬性；
5 .使用after偽物件清除浮動 ；
推薦後面3種方法。
針對方案4還可以這樣：
如果在父元素內要左右排列且不讓父元素坍塌，可以這樣改，將左邊的子類設定為float，右邊的子類設定為overflow：hidden屬性。如下程式碼所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.left{
float:left;
width:200px;
margin-right: 20px;
background-color: #aaaaaa;
}
.parent{
overflow: hidden;
background-color: antiquewhite;
}
@media screen and (max-width: 500px) {
.left{
float: none;
width: auto;
margin-right: 0;
margin-bottom: 20px;
background-color: #aaaaaa;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="left"><p>DEMO</p></div>
<div class="right"><p>DEMO</p></div>
</div>
<p>DEMODEMODEMODEMO</p>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34