016解決父級元素塌陷的問題（程式碼）
阿新 • • 發佈：2021-08-14
程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>解決父級元素塌陷的問題</title> <link rel="stylesheet" href="../css/020.css"> </head> <body> <div id="father"> <div class="layer01"><img src="../../image/1.jpg" alt=""></div> <div class="layer02"><img src="../../image/1.jpg" alt=""></div> <div class="layer03"><img src="../../image/1.jpg" alt=""></div> <div class="layer04"><span>浮動可以向左也可以向右</span></div> <!-- <div class="clear"></div> --> </div> </body> </html>
div { margin: 10px; padding: 5px; } #father { border: 1px #000 solid; /* height:500px; 1、增加父級元素的高度~*/ /* overflow: hidden; */ } #father::after{ content: ''; display: block; clear: both; } .layer01 { border: 1px #F000 dashed; display: inline-block; float: left; } .layer02 { border: 1px #000F dashed; display: inline-block; float: left; } .layer03 { border: 1px dashed #060; display: inline-block; float: left; } /* clear: right; 右側不允許有浮動的元素 clear: left; 左側不允許有浮動的元素 clear: both; 兩側不允許有浮動的元素 clear: none; */ .layer04 { border: 1px dashed #666; font-size: 12px; line-height: 23px; /*設定以百分比計的行高：*/ display: inline-block; float: left; clear: both;/*清除浮動，讓元素既有浮動的效果又有塊元素的效果 */ } /* .clear{ clear: both; margin: 0; padding: 0; } 2、增加一個空的div標籤，清除浮動 */ /*父級邊框塌陷問題 1、增加父級元素的高度~ 2、增加一個空的div標籤，清除浮動 3、overflow */