浮动与清除浮动

最新推荐文章于 2022-10-30 19:55:29 发布

kaze_001

最新推荐文章于 2022-10-30 19:55:29 发布

阅读量158

点赞数

分类专栏： css 学习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_41306423/article/details/106854969

版权

css 学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

日期：2020年6月19日

float 与清除浮动

浮动——float

float 属性有 3 个属性值：left、right、none，分别表示左浮动、右浮动、不浮动，当 float 不为 none 时会使当前元素脱离文档流，看起来像浮起来一样，下面看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动与清除浮动</title>
    <style>
        .parent{
            width: 200px;
            height: 150px;
            border: 1px solid #000;
        }
        .c1{
            width: 50px;
            height: 50px;
            background: lightcoral;
            float: left;
        }
        .c2{
            width: 50px;
            height: 50px;
            background: lightgreen;
            float: right;
        }
        .c3{
            width: 50px;
            height: 50px;
            background: lightskyblue;
            float: right;
        }
        .c4{
            width: 100px;
            height: 50px;
            background: lightgrey;
            float: left;
        }
        .c5{
            width: 100px;
            height: 50px;
            background: lemonchiffon;
            float: right;
        }
        .c6{
            width: 100px;
            height: 50px;
            background: lavenderblush;
            float: none;
        }
        .c7{
            width: 100px;
            height: 50px;
            background: lightblue;
            float: right;
        }
        .c8{
            width: 50px;
            height: 50px;
            background: lightsalmon;
            float: left;
        }
        .c9{
            width: 100px;
            height: 100px;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="c1">1-l</div>
        <div class="c2">2-r</div>
        <div class="c3">3-r</div>
        <div class="c4">4-l</div>
        <div class="c5">5-r</div>
        <div class="c6">6-n</div>
        <div class="c7">7-r</div>
        <div class="c8">8-l</div>
        <div class="c9">9</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
其中 l、r、n 分别代表 float 的三个属性，可以看到当 float 为 none 时，元素就按照正常的文档流排布；当 float 不为 none 时，元素会脱离文档流，不会占据实际文档流中的空间，而是浮于它们之上，元素的排列顺序也与元素在代码中出现的顺序无关

float 可能导致父元素高度塌陷

float 造成父元素高度塌陷的情况只会出现在我们没有给父元素设置高度的时候，我们看两个例子：

// 例一：无浮动情况
.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: none;
    background: lightsalmon;
}

<div class="p-box">
    <div class="f-box">子</div>
</div>
<div class="pp-box">父兄</div>

这里子元素没有浮动，所以即使父元素没有设置高度，它也会被子元素撑开而具有高度
效果：
在这里插入图片描述

// 例二：浮动情况
.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}

<div class="p-box">
    <div class="f-box">子</div>
</div>
<div class="pp-box">父兄</div>

这里子元素设置了浮动，所以子元素在实际文档流中不占据空间，此时父元素因为没有设置高度，所以高度会坍塌为 0
效果：
在这里插入图片描述

清除浮动

清除浮动就是为了解决上面说的父元素在没有设置高度时，子元素浮动会使父元素高度坍塌的问题，下面就是我验证有效且常用的几种方法：

1. 给父元素设置高度

.p-box{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}

<div class="p-box">
    <div class="f-box">子</div>
</div>
<div class="pp-box">父兄</div>

效果：
在这里插入图片描述

2. 为父元素添加 overflow: hidden 样式属性

.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px; 
    overflow: hidden;     // 父元素添加 overflow: hidden 属性
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}

<div class="p-box">
    <div class="f-box">子</div>
</div>
<div class="pp-box">父兄</div>

效果：
在这里插入图片描述

3. 在子元素后追加一个空白子元素，并添加 clear: both 样式属性（不推荐，会造成冗余）

.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}
// 添加一个带 clear: both 属性的空白子盒子
.c-box{
    clear: both;
    height: 0;
}


<div class="p-box">
    <div class="f-box">子</div>
    <div class="c-box"></div>
</div>
<div class="pp-box">父兄</div>

效果：
在这里插入图片描述

4. 对父元素使用伪元素 ::after 来清除浮动（主流）

.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.p-box::after{
    content: '';
    display: block;
    clear: both;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}

<div class="p-box">
    <div class="f-box">子</div>
</div>
<div class="pp-box">父兄</div>

效果：
在这里插入图片描述

kaze_001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与清除浮动

日期：2020年6月19日float 与清除浮动浮动——floatfloat 属性有 3 个属性值：left、right、none，分别表示左浮动、右浮动、不浮动，当 float 不为 none 时会使当前元素脱离文档流，看起来像浮起来一样，下面看一个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co
复制链接

扫一扫