css-float-浮动，高度问题，clear，overflow

解决浮动层没有高度，高度不自动适应的问题 

    在容器上添加以下这个 class

.clearfix:after {
    content
: 
"."
;
    display
: 
block
;
    height
: 
0
;
    clear
: 
both
;
    visibility
: 
hidden
;
}
/* Hides from IE-mac \*/
* html .clearfix {height
: 
1%
;}
/* End hide from IE-mac */

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */

 

在使用Div+Css布局的时候，Float往往比Position更常用，有以下几个值：left，right，none。

Left：元素会移至父元素中的左侧。

Right：元素会移至父元素中的右侧。

None：元素会显示于它在文档中默认出现的位置。

Float的概念很简单，但是实际使用的时候，浮动溢出的问题却很棘手。所谓“浮动溢出”是指：当容器内有浮动元素的时候，由于浮动元素已经脱离了流，所以容器的高度不能自动伸长以适应浮动元素的高度，使得内容溢出到容器外面。

下面代码演示可以看出浮动溢出的实际情况，为了方便，我给外部容器设置了一个边框：

<
div
 
style
=
"border:1px solid #000000;"
 
mce_style
=
"border:1px solid #000000;"
>
    <
div
 
style
=
"float: left;"
 
mce_style
=
"float: left;"
>
hello, world.
</
div
>
</
div
>

<div style="border:1px solid #000000;" mce_style="border:1px solid #000000;">
    <div style="float: left;" mce_style="float: left;">hello, world.</div>
</div>

 

方法一：W3推荐的解决方法 是在浮动元素的下面使用clear，代码如下：

<
div
 
style
=
"border:1px solid #000000;"
 
mce_style
=
"border:1px solid #000000;"
>
    <
div
 
style
=
"float: left;"
 
mce_style
=
"float: left;"
>
hello, world.
</
div
>
    <
div
 
style
=
"clear: both;"
 
mce_style
=
"clear: both;"
>
</
div
>
</
div
>

<div style="border:1px solid #000000;" mce_style="border:1px solid #000000;">
    <div style="float: left;" mce_style="float: left;">hello, world.</div>
    <div style="clear: both;" mce_style="clear: both;"></div>
</div>

虽然这是W3推荐的标准方法，但是在网页里平白无故加入一个空的Div，无论如何都是坏味道。

方法二：有人提出了利用overflow清除浮动的方法，代码如下：

<div style=
"border:1px solid #000000; overflow: auto; zoom: 1;"
 mce_style=
"border:1px solid #000000; overflow: auto; zoom: 1;"
>
    <div style="float: left;"
 mce_style=
"float: left;"
>hello, world.</div>
</div>

<div
 style="border:1px solid #000000; overflow: auto; zoom: 1;" 
mce_style="border:1px solid #000000; overflow: auto; zoom: 1;">
    <div style="float: left;" mce_style="float: left;">hello, 
world.</div>
</div>

 

或者：

<
div
 
style
=
"border:1px solid #000000; overflow: hidden; zoom: 1;"
 
mce_style
=
"border:1px solid #000000; overflow: hidden; zoom: 1;"
>
    <
div
 
style
=
"float: left;"
 
mce_style
=
"float: left;"
>
hello, world.
</
div
>
</
div
>

<div
 style="border:1px solid #000000; overflow: hidden; zoom: 1;" 
mce_style="border:1px solid #000000; overflow: hidden; zoom: 1;">
    <div style="float: left;" mce_style="float: left;">hello, 
world.</div>
</div>

 

其中的zoom是为了兼容IE。

可惜overflow有时候会引起一些意料之外的麻烦,所以，还是少用为妙。

方法三：利用after伪类清除浮动的方法，代码如下：

<
mce:style
 
type
=
"text/css"
>
<!--
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
-->
</
mce:style
>
<
style
 
type
=
"text/css"
 
mce_bogus
=
"1"
>
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}</
style
>
<!--[if IE]>
<
mce:style
 
type
=
"text/css"
>
<!--
.clearfix {
    zoom: 1;
}
-->
</
mce:style
>
<
style
 
type
=
"text/css"
 
mce_bogus
=
"1"
>
.clearfix {
    zoom: 1;
}</
style
>
<![endif]-->
---
<
div
 
style
=
"border:1px solid #000000;"
 
mce_style
=
"border:1px solid #000000;"
 
class
=
"clearfix"
>
    <
div
 
style
=
"float: left;"
 
mce_style
=
"float: left;"
>
hello, world.
</
div
>
</
div
>

<mce:style type="text/css"><!--
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
--></mce:style><style type="text/css" mce_bogus="1">.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}</style>
<!--[if IE]>
<mce:style type="text/css"><!--
.clearfix {
    zoom: 1;
}
--></mce:style><style type="text/css" mce_bogus="1">.clearfix {
    zoom: 1;
}</style>
<![endif]-->
---
<div style="border:1px solid #000000;" mce_style="border:1px solid #000000;" class="clearfix">
    <div style="float: left;" mce_style="float: left;">hello, world.</div>
</div>

 

其中的<!--[if IE]>...<![endif]-->部分是为了兼容IE