解决边框塌陷的四种方法
当父级里面的子元素全部使用浮动后，所有子元素脱离了标准文档流，使得父级内部没有其内容，会造成边框塌陷现象。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <link href="css/float.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="father"> <div class="layer01"><img src="img/photo-1.jpg" alt="日用品"/></div> <div class="layer02"><img src="img/photo-2.jpg" alt="图书"/></div> <div class="layer03"><img src="img/photo-3.jpg" alt="鞋子"/></div> <div class="layer04"> 浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。 </div> </div> </body> </html>
使用外部样式表：
div { margin:10px; padding:5px; } #father { border:1px #000 solid; }
/* 让父级里面的子元素全部浮动*/ .layer01,.layer02,.layer03,.layer04{ float: left; } .layer01 { border:1px #F00 dashed; } .layer02 { border:1px #00F dashed; } .layer03 { border:1px #060 dashed; } .layer04 { border:1px #666 dashed; font-size:12px; line-height:23px; }
浮动之后父级边框塌陷了，解决的四种方法
<!-- 第一种方式：父级元素里最后一个为块元素，使用该块元素的属性，对前面的兄弟元素清除两端浮动 --> <!-- 加一个<h1></h1> 对该块元素h1使用清除浮动 -->
<!-- 第二种方式：直观，直接可以给父级加高度 --> <!-- 第三种：父级元素overflow -->
对父级元素#father{overflow: hidden;}
<!-- 第四种：伪类after -->
#father:after{ display: block; content: ""; /*假设父级里面有内容，然后用clear清除，跟第一种方法类似*/ clear: both; }
