HTML之清除浮动

最新推荐文章于 2025-03-24 10:37:08 发布

Shine 404 Not Found㊣

最新推荐文章于 2025-03-24 10:37:08 发布

阅读量963

点赞数 2

分类专栏： HTML编程文章标签：清除浮动

本文链接：https://blog.youkuaiyun.com/qq_27307175/article/details/106930802

版权

HTML编程专栏收录该内容

1 篇文章

订阅专栏

1.为什么要清除浮动？

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响，这时候就需要在该元素中清除浮动。

2.清除浮动的基本语法格式

在css中，clear属性用于清除浮动，其基本语法格式如下：

选择器｛

    clear：属性值；

｝

clear属性常用的值：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

注意： clear属性只能清除元素左右两侧浮动影响，但是在网页制作经常会遇到一些特殊的浮动影响。例如对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响(高度塌陷）

3.常用四种清除浮动的方法：

方法一：使用空标记清除浮动（使用clear属性来清除）

方法二：使用overflow属性清除浮动

方法三：使用after伪对象清除浮动

方法四：浮动外部元素

（1）使用空标记清除浮动

（*1）解释：

使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

（*2）注意：

对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。

（*3）代码案例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font:36px bold; color:#F00; text-align:center;}
        #layout{background:#FF9;}
        #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
        #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
        .clear{clear:both;}
    </style>
    <body>
        <div id="layout">
            <div id="left">Left</div>
            <div id="right">Right</div>
            <div class="clear"></div>
       </div>
    </body>
</html>

效果：

（2）使用overflow属性清除浮动

（*1）解释：

使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用width:100%。

（*2）注意：

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

（*3）代码案例

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>
            清除浮动案例
        </title>
        <style type="text/css">        
            .simple{
                width: 500px;
                margin: 0 auto;
                border: 1px solid blue;
            }
            .clearfix{
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="simple clearfix">
            I am simple
            <img src="Bqq1.png" alt="图片">
            </div>
    </body>
</html>

效果：

（3）使用after伪对象清除浮动

（*1）解释：

使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

（*2）代码案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>after浮动</title>
        <link rel="stylesheet" href="">
        <style>
            .pencil{
                position:relative;
                width:40px;
                height:40px;
                background-color:#000;
            }
            .pencil:after{
                content:'';
                display:block;
                width:0;
                height:0;
                border-width:20px;
                border-style:solid;
                border-color:transparent transparent transparent #000;      /*设置边框三面为透明颜色，一面为黑色*/
                position:absolute;
                right:-40px;
            }
        </style>
    </head>
    <body>
        <div class="pencil"></div>
    </body>
</html>

效果：

注意事项：

（1）使用户after伪对象清除浮动时的注意事项：

（*1）  必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。

（*2）必须在伪对象中设置content属性，属性值可以为空，如“content: "";”。

 （*3）案例代码：

.father:after{      /*对类名为father父元素应用after伪对象样式*/

display:block;

    clear:both;

    content:"";

    visibility:hidden;

    height:0;

}

（4）浮动外部元素

（*1）解释：

浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

（*2）代码案例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            body{font:36px bold; color:#F00; text-align:center;}
            #layout{background:#FF9;float:left;}
            #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
            right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="left">Left</div>
            <div id="right">Right</div>
        </div>
    </body>
</html>

效果：