CSS之浮动

最新推荐文章于 2024-01-02 17:04:47 发布

xingzhe1992

最新推荐文章于 2024-01-02 17:04:47 发布

阅读量147

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/u013709032/article/details/110575027

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

float布局的出现是为了实现文字环绕图片的效果，类似于word排版时设置图片的文字紧密环绕，效果如下：

代码实现方式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img{
        float: left;
        width: 200px;
        height: 120px;
    }
</style>
<body>
    <img src="https://bkimg.cdn.bcebos.com/pic/d52a2834349b033bb3dfabc11ece36d3d539bd52?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5" alt="">
    <p class="box">
        故事背景取自秦灭六国到西楚霸王项羽灭秦这段英雄辈出的历史时期，时间跨度约30年，是一部以武侠为主题的全民型动画。各种历史事件和民间传说纷呈迭起，仗剑游走江湖的名士侠隐和对现代中国产生深远影响的诸子百家更是在这个合纵连横的大时代中悉数登场。
        百家争鸣的中华古文化在此激烈冲突碰撞，大时代恢宏磅礴的战争场面在连天烽火中震撼重现，江湖儿女的侠骨柔情于动荡乱世间绽放光华……少年天明如杂草般顽强生存于时代变革的乱世之中，面对强暴的政权、险恶的敌人，勇敢地与侠士们进行反抗，经历了一段不俗的遭遇。
    </p>
</body>
</html>

浮动的布局主要有以下几个特点

1.相互贴靠

浮动的元素会相互贴靠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        float: left;
    }
    .box1{
        width: 500px;
        height: 300px;
        background-color: yellow;
    }
    .box2{
        width: 300px;
        height: 200px;
        background-color: red;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果展示如下：

浮动的元素会相互贴靠，由左向右，由上向下，依次排列，只要能放得下，便见缝插针

2.脱离标准流

浮动元素脱离标准流，不再独占一行，可以设置宽高，支持margin和padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        float: left;
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: yellow;
    }
    .box2{
        width: 300px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

浮动元素脱离标准流，会直接叠加在标准流元素的上面展示

3.不设置宽度默认会按照内容计算

如果不对浮动元素设定固定宽高的话，浮动元素的所占位置大小由其内容决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        float: left;
        background-color: yellow;
    }
    .box2{
        float: left;
        background-color: red;
    }
</style>
<body>
    <div class="box1">
        内卷（involution）是近两年流行起来的一个名词，用来指带人类社会在一个发展阶段达到某种确定的形式后，停滞不前或无法转化为另一种高级模式的现象，现在很多人用它来指代非理性的内部竞争或“被自愿”竞争。
    </div>
    <div class="box2">
        <img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" alt="">
    </div>
</body>
</html>

浮动元素的影响

1.浮动元素会脱标，按照指定方向发生移动，遇到父亲的边界或者上一个浮动元素，或者上一个不浮动元素的兄弟就停下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: yellow;
    }
    .box11{
        float: left;
        width: 100px;
        height: 300px;
        background-color: green;
    }
    .box2{
        float: left;
        background-color: red;
    }
    .box3{
        height: 100px;
        background-color: blue;
    }
</style>
<body>
    <div class="box1">
        <div class="box11"></div>
    </div>
    <div class="box2">
        <img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" alt="">
    </div>
    <div class="box3"></div>
</body>
</html>

浮动元素box11受父元素box1限制，浮动元素box受上一个浮动元素box11和上一个非浮动元素box1限制，非浮动元素box3只受上一个非浮动元素box1限制

2.还有一个影响是浮动元素无法撑开父亲元素，页面布局时不免带来一些不好的影响，要解决这个问题，有以下几种办法

给父元素设置高度（不推荐使用）
绝大部分情况下，子元素高度不确定，父元素高度应该由子元素撑开
将父元素也设为浮动元素（不推荐使用）
只有在父元素需要设为浮动时才能使用，否则会影响其他元素
父元素设置overflow:hidden出发BFC
简单快捷，但是子元素超出部分会被隐藏
浮动元素的下面增加一个块元素，设置样式clear:both
增加了额外元素

使用after伪类

    .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }

易于复用，目前通常采用这种方式处理

xingzhe1992

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之浮动

float布局的出现是为了实现文字环绕图片的效果，类似于word排版时设置图片的文字紧密环绕，效果如下：代码实现方式如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫