浮动与清除浮动

最新推荐文章于 2022-10-03 21:24:35 发布

我不是小梅子

最新推荐文章于 2022-10-03 21:24:35 发布

阅读量141

点赞数

分类专栏：新手文章标签：浮动

本文链接：https://blog.csdn.net/weixin_45759895/article/details/102732285

版权

新手专栏收录该内容

19 篇文章 1 订阅

订阅专栏

float

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

<!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>
</head>
<style>
    .box {
        background-color: #eeeeee;
    }

    .item1,
    .item2 {
        width: 200px;
        height: 200px;
        /* float设置元素浮动  left左浮动 right右浮动 */
        /* 元素设置浮动后会脱离正常的文档流 将不再参与流式布局，紧跟其后的元素就会占据其原有的位置*/
        float: right;
        /* 注意：只要用到了浮动，就一定要清除浮动 */
    }

    .item1 {
        background: tomato;
    }

    .item2 {
        background: blue;
    }

    .other {
        width: 500px;
        height: 500px;
        background-color: yellow;
    }

    /* 清理浮动第一张方式： */
    /* .clear { */
    /* 通过清理浮动让父元素自动获取高度 */
    /* 优点：代码少，好理解 */
    /* 缺点：增加了多余的空标签 */
    /* clear: both; */

    /* } */

    /* 清除浮动第二种 */
    /* 优点：之间明了，比较之间 */
    /* 缺点，父元素高度固定，如果浮动元素高度不一致，会影响画面的布局 */

    /* 推荐在导航栏使用*/
    .box {
        height: 200px;
    }

    /* 清除浮动的第三种方式 */
    /* 优点：几乎没有缺点，是比较常用的一种清理浮动的方式 */
    /* 代码量多，难记 */
    .box::after {
        content: "";
        /* 块元素  */
        display: block;
        height: 0px;
        /* 元素不可见 */
        visibility: hidden;
        clear: both;
    }

    .box {
        /* 缩放 */
        zoom: 1;
    }
</style>

<body>
    <div class="box">
        <div class="item1">111</div>
        <div class="item2">222</div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="other"></div>

</body>

</html>

我不是小梅子

关注

0
点赞
踩
1

收藏

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

float在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。**<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫