效果:設置浮動後父元素高度塌陷 插入下麵兩段代碼:. 效果: ...
<!DOCTYPE html>
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>高度塌陷解決</title> <style media="screen"> .box1{ border: 10px #bfc993 solid; } .box2{ width: 100px; height: 100px; background-color: rgb(224, 223, 182); float: left; } .clearfix{ zoom:1; } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
效果:設置浮動後父元素高度塌陷
插入下麵兩段代碼:.
clearfix:after{
content: ""; display: block; clear: both; } <div class="box1 clearfix">
效果: