清除浮动

小波

2年前更新

140

文章目录[隐藏]

为什么要清除浮动？
额外标签法(隔墙法)：
使用overflow属性：
清除浮动之after伪元素
- 主要部分：
双伪元素（推荐）

为什么要清除浮动？

父级盒子没有高度
子盒子是浮动了的
影响了下面的布局

额外标签法(隔墙法)：

通过在最后一个浮动元素后面添加带有clear属性的标签来清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>隔墙法清楚浮动</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 10px;
        }
        .geqiang {
            clear: both;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class=“geqiang”></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

比如上面这个代码中，我给geqiang这个类加了clear: both;那么我在后续的任意一个div盒子里面用这个类，那么就会在那个盒子后面隔个墙，达到清除浮动的效果。

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

使用overflow属性：

给浮动元素的父元素添加overflow属性来清除浮动（不推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>overflow清除浮动</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 10px;
        }

        .clear-fix {
            overflow: hidden;
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 */
        }
    </style>
</head>

<body>
    <div class="clear-fix">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

优点：简单，只改变父元素的css样式，没有多余的html元素

缺点：容器内如果有超出的部分会被隐藏

清除浮动之after伪元素

原理和额外标签法一样，只是这个是升级版，但是这个是给父级元素添加。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>overflow清除浮动</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 10px;
        }
        .clear-fix:after {
            content: '';/*必须有*/
            display: block;/*转换为块元素，因为这个伪类元素默认是行内元素*/
            clear: both;
        }
        .clear-fix {
            // ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="clear-fix">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

</html>

主要部分：

.clear-fix:after {
            content: '';/*必须有*/
            display: block;/*转换为块元素，因为这个伪类元素默认是行内元素*/
            clear: both;
        }
        .clear-fix {
            // ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 
            *zoom: 1;
        }

双伪元素（推荐）

前面后面都加上盒子闭合起来，核心代码：

.clear-fix:before,
        .clear-fix:after {
            content: '';
            display: table;
        }
        .clear-fix:after {
            clear: both;
        }
        .clear-fix {
            // ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 
            *zoom: 1;
        }

调用方法和刚刚after伪元素的一样的，直接在父级元素里面加这个类。

CSS

评分

欢迎为Ta评分

赞赏