CSS清除浮动

参照这个

http://www.divcss5.com/jiqiao/j406.shtml

利用clearfix清除:

没清除之前:

CSS清除浮动

清除后:

CSS清除浮动

清除代码:

html中

<!DOCTYPE html>
<body>
    <head>
        <title>TITLE</title>
        <link rel="stylesheet" href="float.css" media="screen">
    </head>
    <div class="divcss5 clearfix">
        <div class="divcss5-left">
            left
        </div>
        <div class="divcss5-right">
            right
        </div>
    </div>
</body>

css:

.divcss5{
    border: 1px solid #F00; 
    background: #FF0;
    /* overflow: hidden;*/
}
.divcss5-left{
    height: 100px;
    border: 1px solid #00F;
    background: #F0F;
}
.divcss5-right{
    height: 500px;
    border: 1px solid #00F;
    background: #00ffff;
}
.divcss5-left,.divcss5-right{
    float: left;
}
.clearfix :after{
    content: " ";
    display: block;;
    clear: both;
}

CSS清除浮动

主要在这个地方

clearfix一般是这一段:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

CSS清除浮动