技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> CSS 简易浮动清除方法讨论

CSS 简易浮动清除方法讨论

浏览:1995次  出处信息
CSS白痴再来讨论一下CSS简易浮动清除的方法。没办法，菜鸟入门，一切都得从头学。大家认为很菜，很土的东西，我也得从头接触。不过我认为这一切都是值得的。

到底发生了什么？

首先，大家先看图片，这里我要告诉大家我想得到什么样的效果。

其中html代码和样式定义如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>简易浮动清除</title>
        <style>
            .container {
                border: 3px solid #000;
                width: 600px;
                background-color: #eee;
                margin-bottom:50px;
            }
           
            .floatedbox {
                float: left;
                border: 3px solid #bbb;
                width: 125px;
                height: 125px;
                background-color: #fff;
                margin-right: 1em;
                padding: 0 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="floatedbox">
                <p>
                    floated box
                </p>
            </div>
            <h3>Container 1</h3>
            <p>
                (<em>without</em>
                easy clearing)
            </p>
        </div>
    </body>
</html>

代码是写完了，可是实际运行效果却是不尽人意：

去网上查了一下，这就是著名的浮动问题。我们需要做的就是将浮动效果给清除。

咋个解决方法

网上有好多解决办法，但是普遍是在这三类中：

  1. 在浮动的div外层，增加含有clear:both样式定义的div元素
  2. 使用overflow:auto,但是这个传说中会引起一些很杯具的效果
  3. 使用after伪元素进行处理，同时对于IE使用hack

首先第二种，既然传说中会杯具，那么我肯定不用。而第一种，对于我这种有类似html洁癖的人也肯定不会使用，平白无故增加一个div标签，实在感觉有些划不来，还有些恶心。

所以我彩after伪元素来处理，具体处理后的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>简易浮动清除</title>
        <style>
            .container {
                border: 3px solid #000;
                width: 600px;
                background-color: #eee;
                margin-bottom:50px;
            }
           
            .floatedbox {
                float: left;
                border: 3px solid #bbb;
                width: 125px;
                height: 125px;
                background-color: #fff;
                margin-right: 1em;
                padding: 0 10px;
            }
           
            .clearfix:after{
                content:".";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
            }
           
            * html .clearfix{height:1%;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="floatedbox">
                <p>
                    floated box
                </p>
            </div>
            <h3>Container 1</h3>
            <p>
                (<em>without</em>
                easy clearing)
            </p>
        </div>

    <div class="container">
            <div class="floatedbox">
                <p>
                    floated box
                </p>
            </div>
            <h3>Container 1</h3>
            <p>
                (<em>without</em>
                easy clearing)
            </p>
        <div style="clear:both;"></div>
        </div>
   
        <div class="clearfix container">
            <div class="floatedbox">
                <p>
                    floated box
                </p>
            </div>
            <h3>Container 1</h3>
            <p>
                (<em>without</em>
                easy clearing)
            </p>
        </div>
    </body>
</html>

问题得以解决。网上还有人说在div标签后面加上一个“点”感觉不爽，而且还要使用visibility来隐藏。所以建议使用如下代码替代:

.clearfix:after{content:"";display:block;height:0;clear:both;}

至于这两种小技巧哪种更好些，本人倒没什么感觉。如果喜欢装X的可能会选用”点”的方式。如果喜欢简洁的可能会选用加空格的方式吧？不过不管咋样，问题解决了。

建议继续学习：

  1. 浮动引起的文本重影    (阅读：4008)
  2. OverFlow -- 创建BFC,清除浮动    (阅读：2993)
  3. IE6浮动引起的一些BUG    (阅读：2220)
  4. IE双倍浮动边界Bug    (阅读：2146)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：CSS 水平居中之相对定位与负边距法
后一篇：CSS float 父层定义的颜色无法显示 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1