[Web 前端] 018 css 清除浮动的四种方法

时间：2019-05-03 14:32:38 阅读：164 评论：0 收藏：0 [点我收藏+]

标签：选择器 class 无法 src ble title ref over str

清除浮动的四种方法

加 clear: ...（见例1）
父级上增加属性 overflow：hidden（见例2.1）
在最后一个子元素的后面加一个空的 div，给它一个样式属性 clear: both（不推荐）（见例2.2）
使用成熟的清浮动样式类 clearfix（见例3）

少废话，上例子

例 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
        <div class="box5">box5</div>
        <div class="box6">box6</div>
    </body>
</html>

div{
    width: 100px;
    height: 100px;
    float: left;
}
.box1{
    background: red;
}
.box2{
    background: orange;
}
.box3{
    background: yellow;
}
.box4{
    background: green;
    /* 清除浮动
        left: 清除左浮动
        right: 清除有浮动
        both: 清除左右两边的浮动 */
    /*clear: left; 只加上这句，效果见效果截图 2*/
    /*clear: rightt; 只加上这句，显示上没有变化 */
}
.box5{
    background: blue;
}
.box6{
    background: indigo;
}
.box7{
    background: purple;
}

效果截图 1

技术图片

缩小浏览器的宽度后的截图

技术图片

效果截图 2

技术图片

例 2

<!-- 例2 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="wrap">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
            <div class="box4">box4</div>
            <div class="box5">box5</div>
            <div class="box6">box6</div>
            <div class="box7">box7</div>
        </div>
    </body>
</html>

<!-- 例2.1 -->
.wrap{
    border: 2px solid;
    /* 清除浮动
        解决父级元素高度无法撑开问题
        注意: 是给浮动元素的父级添加 */
    /*overflow: hidden; 加上这句，见效果截图 4 */
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
    width: 100px;
    height: 100px;
    float: left;
}
.box1{
    background: red;
}
.box2{
    background: orange;
}
.box3{
    background: yellow;
}
.box4{
    background: green;
    clear: left;
}
.box5{
    background: blue;
}
.box6{
    background: indigo;
}
.box7{
    background: purple;
}

效果截图 3

技术图片

效果截图 4

技术图片

<!-- 例2.2 html 不变 -->
.wrap{
    border: 2px solid;
}
.wrap:after{    /* 伪类选择器 */
    /* 也有 before，但一般使用 after
        这种方法的思路：
            1. 在父级元素后插入一个空的字符串
            2. 将这个字符串转成块级元素
            3. 用 clear: both 给此元素清除浮动
            4. 没有添加不必要的标签，不影响页面结构
        注意：给浮动元素的父级添加 */
    content: '';
    display: table;
    /* display: block; 从效果上看，block 与 table 一致 */
    clear: both;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
    width: 100px;
    height: 100px;
    float: left;
}
.box1{
    background: red;
}
.box2{
    background: orange;
}
.box3{
    background: yellow;
}
.box4{
    background: green;
    clear: left;
}
.box5{
    background: blue;
}
.box6{
    background: indigo;
}
.box7{
    background: purple;
}

效果截图 5
- 与效果截图 4 一般无二，故略

例 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="wrap">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
            <div class="box4">box4</div>
            <div class="box5">box5</div>
            <div class="box6">box6</div>
            <div class="box7">box7</div>
            <div class="cl"></div>      <!-- 多了这句 -->
        </div>
    </body>
</html>

.wrap{
    border: 2px solid;
}
.cl{    /* 可行，但不推荐，因为会对页面结构产生影响 */
    clear: both;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
    width: 100px;
    height: 100px;
    float: left;
}
.box1{
    background: red;
}
.box2{
    background: orange;
}
.box3{
    background: yellow;
}
.box4{
    background: green;
    clear: left;
}
.box5{
    background: blue;
}
.box6{
    background: indigo;
}
.box7{
    background: purple;
}

效果截图 6
- 与效果截图 4 一般无二，故略

补充

有时会加一句 zoom:1;，这样做是为了兼容 IE

参考：北京图灵学院的 Web 前端公开课

[Web 前端] 018 css 清除浮动的四种方法

标签：选择器 class 无法 src ble title ref over str

原文地址：https://www.cnblogs.com/yorkyu/p/10804399.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行