CSS浮动溢出及其解决方法

首先要知道问题原因是 浮动溢出
在非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

html:
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>

css:
.parent{
    margin: 0 auto;
    width: 500px;
    border: 2px solid red;
    padding: 10px;
}
.parent:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.child1{
    float: left;
    height: 300px;
    width: 200px;
    background: #666666;
    border: 1px solid blue;
}
.child2{
    height: 100px;
    margin-left: 210px;
    background: pink;
    border: 1px solid yellow;
}

方法一:
在html的child2后添加<div class="clear"></div>,css为.clear{clear:both;}
优点:简单,代码少,浏览器支持好   
缺点:如果页面浮动布局多,则需要很多空标签
方法二:
在parent容器添加一个:after伪元素,并使用content:"." 或者为" "在元素的后面生成了内容为一个点的块级元素,并使用一切方法使这个块级元素隐藏并清除浮动clear:both.
.parent:after{
content: ".";/生成一个元素内容为".",为" "时也好用/
display: block;/让元素为块级元素/
height: 0;/用以下两种方式让元素不渲染/
visibility: hidden;
clear: both;/清除浮动/
}
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
方法三:
让parent容器也浮动,只需给parent容器添加 float:left,也可闭合浮动。
优点:代码少
缺点:会导致整个页面大部分都处于浮动状态,容易出现问题

记录你我
请先登录后发表评论
  • latest comments
  • 总共0条评论