css布局—清除浮动的常用方法

<div class="container">
    <div class="block1">子元素1</div>
    <div class="block2">子元素2</div>
</div>

.block1{ width:200px;
              height:200px;
          background: #CBA627;
          float:left;
          margin-right:10px;}
.block2{ width:200px;
              height:100px;
          background:#009900;
          float:left;}

如上图，在使用div+css写页面的时候，经常要使用float样式进行左右分栏布局。但是在子元素应用float样式之后，父元素的高度会因为浮动而消失，因此往往需要采取一些方法来清除浮动。现整理方法如下：

（1）浮动元素后面添加空标签，并为标签添加样式{clear:both}如下所示：

<div class="container1">
    <div class="block1">子元素1</div>
    <div class="block2">子元素2</div>
    <div class="clear"></div>
</div>

/*子元素的样式不变*/

.block1{ width:200px;
         height:200px;
         background: #CBA627;
         float:left;
         margin-right:10px;}
.block2{ width:200px;
         height:100px;
         background:#009900;
         float:left;}

/*新添空标签的样式为clear*/

.clear{ clear:both;}

(2)为包含浮动元素的父元素添加样式（如下所示），zoom是为兼容ie6：

.container{ overflow:hidden;
            zoom:1;}

(3)为包含浮动元素的父元素伪类添加样式（如下所示），新添样式缺一不可：

.container:after{ content:" 20";
visibility:hidden;
display:block;
clear:both;
height:0;}

(4)为父元素添加样式{ float:left;}，该方法不推荐!!!