1. 程式人生 > >css清除浮動

css清除浮動

zoom rfi clas border ack lin auto pla display

清除浮動的方法:

方法一:給浮動元素的父親元素添加屬性:overflow: auto;

<style type="text/css">
*{padding:0;margin:0;}
.clearfix{
border: 3px solid green;
width: 200px;
overflow: auto;//這裏是關鍵

zoom: 1;//可以支持IE6
}
.left{
width: 100px;
height: 100px;
float:left;
background: red;
}
.right{
width: 100px;
height: 100px;
float:left;
background: #000;
}

</style>
</head>
<body>
<section class="clearfix">
<div class="left"></div>
<div class="right"></div>
</section>

方法二:運用after偽類

<section class="clearfix">
  <div class="left"></div>
  <div class="right"></div>
</section>

.clearfix:after{

  content:".";

  display: block;

  clear: both;

  height: 0;

  line-height:0;

  font-size: 0;

  visibility: hidden;

}

.clearfix{

  zoom: 1;

}

css清除浮動