清除浮动，浮动元素的高度自适应问题

一、问题

当有时不浮动的父元素装载着浮动的子元素时，这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大。比如截图的第一行图，上面一条黑色的粗线，就是父div的边框（为了看效果，我设置了父div的border：5px。左右两边是各浮动一个div）。

于是乎，我想解决这个父元素高度不会跟随着子元素的内容而变化的问题。谷歌了一下，找到答案

二、解决方法

参考来源：http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

里面提到了四种方法，分别对应下面这张图的第2、3、4、5行的图。并且这是在IE6、7浏览器下的截图，说明能很好的兼容在IE低版本浏览器。

法一：添加空元素

直接在浮动的子元素下添加一个非浮动的空元素。原因是父元素肯定会考虑非浮动元素的位置，非浮动的空元素又是放在浮动元素的下面，所以父元素的高度就被撑开了。

1、 不好的地方就是添加了冗余代码，违背语义化的标准，特别是现在提倡语义化，article、footer、header都使用具有语义化的标签来写。

2、但是，这是一种我喜欢的方法，直接添加非浮动的子元素，简单。另外一种我比较喜欢的方法就是使用clear：both，好吧，原谅我这么土，喜欢用这个方法，因为我觉得够easy，又能做到兼容。

<!-- 法1 下方添加空元素 -->
<p>添加空元素</p>
<div style="border:5px solid #000;">
    <div style="float:left;width:45%;height:100px;background:#ccc"></div>
    <div style="float:right;width:45%;height:100px;background:#000"></div>
    <div style="clear:both"></div>
</div>

 

 法二：父元素设置为浮动

父元素带着子元素一起浮动，duang~

<!-- 法2 父元素也设置为浮动元素 -->
<p>父元素设置为浮动</p>
<div style="border:5px solid #000;float:left;width:100%;">
    <div style="float:left;width:45%;height:100px;background:#ccc"></div>
    <div style="float:right;width:45%;height:100px;background:#000"></div>
</div>

 

法三：浮动元素的自动清除

设置父元素的一个css样式。overflow：hidden

<!-- 法3 浮动元素的自动clearing  -->
<p>浮动元素的自动clearing</p>
<div style="border:5px solid #000;width:100%;overflow:hidden">
    <div style="float:left;width:45%;height:100px;background:#ccc"></div>
    <div style="float:right;width:45%;height:100px;background:#000"></div>    
</div>

 

法四：通过css添加子元素

<!-- 法4 通过css添加子元素 -->
<p>通过css添加子元素</p>
<div style="border:5px solid #000;width:100%;" class="clearfix">
    <div style="float:left;width:45%;height:100px;background:#ccc"></div>
    <div style="float:right;width:45%;height:100px;background:#000"></div>    
</div>

/* css样式 */
.clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
    }
.clearfix {
      zoom: 1;                // 触发IE的hasLayout属性，该属性IE独有
    }

 

如果为了满足语义化、不添加冗余代码，就使用方法四。

关于浮动元素的clearing问题，就解决了