CSS清浮动处理

最新推荐文章于 2024-04-12 05:51:26 发布

Winge_Fish

最新推荐文章于 2024-04-12 05:51:26 发布

阅读量352

点赞数

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/Winge_Fish/article/details/52517787

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，特别是在CSS2.0之前，就必须面对这个问题。先上代码：

一、浮动带来的便利，但同时也带来一些问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>clear float</title>
    <style>
        .container {
            margin: 30px auto;
            width: 600px;
            height: 300px;
        }
        .p {
            border: 3px solid #a38;
        }
        .c {
            float: left;
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: #083;
        }

    </style>
</head>

<body>

<div class="container">
    <div class="p">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
    </div>
</div>

</body>
</html>

我们希望看到结果是：

但实际上是：

父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，我们需要一些清除浮动的技巧。

二、如何清理浮动？

解决这个问题思路是：

1. 利用clear属性，清理浮动。

2. 使父容器形成BFC

clear 属性定义了元素的哪边上不允许出现浮动元素。

clear 可以取值为left：属性规定元素的在左侧不允许浮动元素，即：clear:left属性只是消除其左侧div浮动对它自己造成的影响。

取值为right：属性规定元素的在右侧不允许浮动元素。取值为both: 属性规定元素的在左右侧不允许浮动元素

方法一：添加空的DIV标签，解决浮动问题，把刚才代码稍微修改下：

<div class="p">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <div style="clear:both;"></div>
</div>

在最后添加了一个非浮动的div，由于它有clear:both属性，所以它会按照左右两侧div不浮动来定位自己，也就是定位到下一行，而父容器看到有一个非浮动、

普通流的子元素元素，会将其包围，这样造成了顺便也把三个浮动元素也包裹起来的效果，高度不再塌陷。

此方法虽然很好，兼容性也不错，但是添加多余标签，缺点：把表现和数据混淆，还有margin等属性失效。

方法二，使用CSS插入元素，解决浮动问题

核心还是：向父容器最后追加元素，但我们可以利用CSS的:after伪元素来实现。

对父容器添加一个类：clearfix css代码如下：

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

.clearfix { *zoom:1; }

对以上的属性解释下：

content:"\200B"; 通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的。

display:block 使生成的元素以块级元素显示,占满剩余空间;

height:0 避免生成内容破坏原有布局的高度。

clear:both; 清除浮动影响

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。hasLayout是IE浏览器专有的一个属性，用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现bug，其原因可能与hasLayout没有被自动触发有关，我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。这也算是针对IE下疑难杂症的特殊偏方了，很多时候，触发了hasLayout就可以药到病除了。这个是hack写法，用来识别不同版本的IE浏览器。*后面的属性 IE6 IE7能识别，IE8 IE9……都不能识别；"_"后面的属性，只有IE6能识别，其他版本（IE7 8 9 更高级别）都不能识别。

最后一个正确的终极版的清除浮动实例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>clear float</title>
    <style>
        .container {
            margin: 30px auto;
            width: 600px;
            height: 300px;
        }
        .p {
            border: 3px solid #a38;
        }
        .c {
            float: left;
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: #083;
        }
        .clearfix:after {
            content: "\200B";
            display: block;
            height: 0;
            clear: both; }
        .clearfix {
            *zoom:1; 
        }
    </style>
</head>

<body>

<div class="container">
    <div class="p clearfix">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>

    </div>
</div>

</body>
</html>