cssクリアフローティング互換IE+,FF

6960 ワード

上のコード:
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css        IE+, FF</title>

<style type="text/css">

.clearfix {

  *zoom: 1;

}

.clearfix:before,

.clearfix:after {

  display: table;

  content: "";

  line-height: 0;

}

.clearfix:after {

  clear: both;

}

.fl {

    float: left;

}

.box {

    border: 1px solid #F00;

    width: 320px;

    height: 150px;

    margin: 5px;

}



</style>

</head>



<body>

<div class="clearfix" style="border:1px solid #00F;">

  <div class="fl box"></div>

  <div class="fl box"></div>

</div>

<div class="box"></div>

</body>

</html>