浮动float

zhouming1107

已于 2023-03-11 11:13:07 修改

阅读量84

点赞数

分类专栏： # css 文章标签： css html css3 前端 html5 Powered by 金山文档

于 2023-03-11 11:11:50 首次发布

本文链接：https://blog.csdn.net/zhouming1107/article/details/129459095

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浮动用来实现并排

浮动的最本质功能:用来实现并排

比如下面的三个div是块级元素。它们不能并排显示。为了让他们能够显示在一排，我们就要让三个div浮动起来，我们给div添加属性：float: left后三个div就并排显示，并且2号div紧挨着1号div，3号div紧挨着2号div，记住这个紧挨着的特性，后面有用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            color: #fff;
            font-size: 20px;
        }
        .box1 {
            background: #f00;
        }
        .box2 {
            background: #0f0;
        }
        .box3 {
            background: #00f;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            color: #fff;
            font-size: 20px;
            float: left;
        }
        .box1 {
            background: #f00;
        }
        .box2 {
            background: #0f0;
        }
        .box3 {
            background: #00f;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

浮动使用的要点

浮动使用要点1:要浮动，并排的盒子都要设置浮动(即一个层级的兄弟元素都要浮动)

下面的代码中我们让1号和2号div浮动但是3号div没有浮动，我们会看到3号div被1号div覆盖了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            color: #fff;
            font-size: 20px;
        }
        .box1 {
            background: #f00;
            float: left;
        }
        .box2 {
            background: #0f0;
            float: left;
        }
        .box3 {
            background: #00f;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

浮动使用要点2:父盒子要有足够的宽度，否则子盒子会掉下去

下面的代码我们可以看到：三个子div的宽度加起来为300px，但是父div只有299px.所以3号div掉下去了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 299px;
            height: 100px;
            background: #ff11ff;
        }
        .box1,.box2,.box3 {
            width: 100px;
            height: 100px;
            color: #fff;
            font-size: 20px;
        }
        .box1 {
            background: #f00;
            float: left;
        }
        .box2 {
            background: #0f0;
            float: left;
        }
        .box3 {
            background: #00f;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
</body>
</html>

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素，一直找到它的父元素

下面的代码中，父div的宽度是440px，1、2、3号div的宽度总和为300px，所以可以并排显示，这时候父div的宽度还剩140px，而4号div的宽度是150px,想贴靠3号div宽度不够，所以就去找2号div贴靠，发现宽度够，就贴靠在2号div上。5号div的宽度300px想贴靠4号div的时候发现1、2、4号div加起来的宽度是350px，后面剩余的宽度不够。所以就去找1号div，发现宽度够，就贴靠在1号div上。同理6号div只能贴靠在他的父div上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 20px;
            color: #fff;
        }
        .box {
            width: 440px;
            height: 100px;
            background: #ff11ff;
        }
        .box1 {
            width: 100px;
            height: 300px;
            background: #f00;
            float: left;
        }
        .box2 {
            width: 100px;
            height: 200px;
            background: #0f0;
            float: left;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: #00f;
            float: left;
        }
        .box4{
            width: 150px;
            height: 100px;
            background: #77f;
            float: left;
        }
        .box5{
            width: 300px;
            height: 100px;
            background: #566;
            float: left;
        }
        .box6{
            width: 450px;
            height: 100px;
            background: #843;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
</body>
</html>

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。

下面的代码中可以看到a标签设置了浮动后就可以设置宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       a {
           float: left;
           margin-right: 10px;
           width: 100px;
           height: 50px;
           background: #f00;
       }
    </style>
</head>
<body>
    <a href="">我是链接1</a>
    <a href="">我是链接2</a>
    <a href="">我是链接3</a>
</body>
</html>

右浮动

浮动的兄弟元素中一定是按顺序来的。先第一个元素，再第二个元素，以此类推。

下面的代码中：链接1先浮动到右边然后链接2，再然后链接3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            background: #0f0;
        }
       a {
           float: right;
           margin-right: 10px;
           width: 100px;
           height: 50px;
           background: #f00;
       }
    </style>
</head>
<body>
    <div>
        <a href="">我是链接1</a>
        <a href="">我是链接2</a>
        <a href="">我是链接3</a>
    </div>
</body>
</html>

BFC规范

什么是BFC规范

从一个现象开始说起：一个盒子不设置height，当内容子元素都浮动时，无法撑起自身。

下面的代码我们可以看到子元素都浮动起来后，父元素没有高度了。这是因为父元素没有形成BFC.

所谓BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

比如这里的box1。现在里面的子元素会影响到了box1的外面的元素的布局。所以这里的box1就不是一个隔离的独立的容器，就不是BFC.为了布局正常我们要让box1形成BFC.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            border: 1px solid #429;
        }
       a {
           float: left;
           margin-right: 10px;
           width: 100px;
           height: 50px;
           background: #f00;
       }
       .box2 {
           background: #00ff00;
       }
    </style>
</head>
<body>
    <div class="box1">
        <a href="">我是链接1</a>
        <a href="">我是链接2</a>
        <a href="">我是链接3</a>
    </div>
    <div class="box2">
        我应该在下面
    </div>
</body>
</html>

如何形成BFC

方法1: float的值不是none

方法2: position的值不是static或者relative

方法3: display的值是inline-block、flex或者inline-flex

方法4: overflow:hidden;(最常用)

下面的代码中我们用了方法4给box1加上overflow: hidden; 后box2的布局就正常了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            border: 1px solid #429;
        }
        .box1 {
            overflow: hidden;
        }
        a {
            float: left;
            margin-right: 10px;
            width: 100px;
            height: 50px;
            background: #f00;
        }
        .box2 {
            background: #00ff00;
        }
    </style>
</head>
<body>
<div class="box1">
    <a href="">我是链接1</a>
    <a href="">我是链接2</a>
    <a href="">我是链接3</a>
</div>
<div class="box2">
    我应该在下面
</div>
</body>
</html>