css---浮动知识点精炼汇总

前言

欢迎来到我的博客

个人主页:北岭敲键盘的荒漠猫-CSDN博客

浮动简单理解与介绍

这是我们普通的页面标签效果。

每个标签从上到下依次排列。

浮动顾名思义就是让这个标签飞翔起来。

他飞起来后，后面的标签来到他的位置上。

而浮动的标签就会显示在标签的上面。

如果多个相邻的标签一起浮动。那么这些浮动的标签就会在一行上排列。

浮动的作用

1.横向排列块型盒子

我们的块标签都是纵向排列的，即使设置了长宽后他们依然是纵向排列。

css 复制代码

    <style>
        .class {
            height: 80px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div style="background-color: blueviolet;" class="class">1</div>
    <div style="background-color: brown;" class="class">2</div>
    <div style="background-color: chartreuse;" class="class">3</div>
</body>

我们可以利用浮动来让他们横向排列。

2.制作左右框效果

利用浮动可以很方便的把框给左右两边分布。

3.制作随父标签变化的页面

正常情况下，我们的窗口是不会随页面改变的，浮动可以保证浮动内容显示出来。

浮动的语法

语法: float: 属性值;

属性值:

|-------|---------|
| 属性 | 作用 |
| none | 不浮动(默认) |
| left | 左浮动 |
| right | 右浮动 |

效果跟上面一样，不演示了。

浮动的特性

添加浮动之后，标签的特性就会改变。

脱标

标准流:就是我们标签默认自己的特性，纵向排列。

直观理解:

其实就是添加浮动后，他就不是他原先的标签了。恕瑞玛飞升了，他原先的位置空出来了，给后面的人了。

直观的看效果吧：

css 复制代码

    <style>
        .class {
            height: 200px;
            width: 300px;
        }
    </style>
</head>

<body>
    <div style="background-color: blueviolet;" class="class">1</div>
    <div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div>
    <div style="background-color: chartreuse;" class="class">3</div>
</body>

后面的人继承他的位置。

水平顶端对齐

css 复制代码

    <style>
        .class {
            height: 200px;
            width: 300px;
            float: left;
        }
    </style>
</head>

<body>
    <div style="background-color: blueviolet;" class="class">1</div>
    <div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div>
    <div style="background-color: chartreuse;" class="class">3</div>
</body>

制作苦茶子的形状：

根据父标签自动变化

我们做的这个苦茶子会根据父标签(整个窗口)的变化而变化。

行内块特性

不管你浮动之前是什么类型的标签，浮动之后统一都是行内块标签。

浮动在页面布局中的应用

我们先来分析一下浮动对于布局的优势劣势

优势:

1.可以便捷的进行平行排列。

2.可以进行左右侧控制

3.内容会根据父盒子的状态自主改变。

劣势:

1.默认是在一行中排列。并不能垂直排列。

针对他的优劣势我们想要布局的话，似乎需要解决这个一行排列的问题。

那么我们知道标准流是垂直排列的。

也就是说，我们可以利用垂直排列的特性，来创造盒子，用盒子来进行垂直布局，然后用浮动标签进行盒子内部的布局。

案例演示:

css 复制代码

    <style>
        .mid {
            height: 100px;
            width: 400px;
            margin: 0 auto;
            margin-top: 2px;
            margin-bottom: 2px;
            background-color: palegoldenrod;
        }

        .flat {
            float: right;
            width: 20px;
            height: 20px;
            background-color: black;
            margin: 5px 5px;
        }
    </style>
</head>

<body>
    <div style="height: 30px; background-color: palegoldenrod;">
        <div style="float: left;" class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
    </div>
    <div class="mid"></div>
    <div class="mid"></div>
    <div class="mid"></div>
    <div style="height: 50px; background-color: palegoldenrod;"></div>
</body>

清除浮动

清除浮动的情景：

我们会遇到类似于商品架这样的需求，我们的盒子不会给定高度，而是随着商品的增加而增高。

但是我们明白，浮动的脱标特性会让这个盒子中没有标准流元素，也就是说这个盒子会变成高度为0的情况。

看以下场景：

我先把浮动注释起来

css 复制代码

    <style>
        .flat {
            /* float: right; */
            width: 60px;
            height: 80px;
            background-color: black;
            margin: 5px 5px;
        }
    </style>
</head>

<body>
    <div style="background-color: palegoldenrod;">
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
    </div>
</body>

我没有设置高度，盒子随着子元素变大而变大。

下面把注释去掉

盒子没了

消除浮动就是针对这种情况产生。

清除浮动的方法

添加额外的块级标签

清除方法:在浮动标签的最后再添加一个标签，这个标签添加清除浮动

clear: both;

缺点：每个需要清除浮动的位置都需要添加这个表情，导致结构比较复杂。

效果：

css 复制代码

    <div style="background-color: palegoldenrod;">
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
        <div style="clear: both;"></div>
    </div>

父元素添加overflow属性

给父元素设置一个overflow属性，属性值使用hidden。

优点:相比于添加额外标签，这个方法很简洁。

缺点:这个属性是隐藏溢出部分的意思，有的盒子一半在外面就会显示异常。

效果

css 复制代码

    <div style="background-color: palegoldenrod; overflow: hidden;">
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
    </div>

父元素添加伪元素

给父元素添加下面属性

css 复制代码

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

原理跟额外标签差不多

css 复制代码

    <style>
        .flat {
            float: left;
            width: 60px;
            height: 80px;
            background-color: black;
            margin: 5px 5px;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div style="background-color: palegoldenrod;" class="clearfix">
        <div class="flat"></div>
        <div class="flat"></div>
        <div class="flat"></div>
    </div>
</body>

效果

双伪元素清除浮动

添加这串代码（*zoom有时候会显示异常，看情况加，加上兼容性好）

css 复制代码

.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
/* 确保IE6-7也能清除浮动 */
.clearfix {
  *zoom: 1;
}