本篇简单记录一下css浮动这个属性学习的心得

网页布局

本质:就是,用css 来摆盒子

三种布局方式

  1. 标准流 :就是前面所学的 块级元素,行内元素和行内块元素。
  2. 浮动
  3. 定位

为什么要浮动

在标准流布局方式里面,我们的div这样的块级元素是不可以共处于一行的,要使他在一行显示,我们可以把它转成行内块元素也就是

display:inline-block,虽然这样可以,但是这样依旧不如浮动更加灵活,浮动的精髓就是 ** 和

div之类块级元素不可以共处一行

    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .one {
            background-color: antiquewhite;
        }

        .two {
            background-color: pink;
        }
    </style>

    <div class="one">div1</div>
    <div class="two">div2</div>

我先准备了 如上代码,设置了简答设置了盒子的高度和宽度以及背景颜色

由于div是块级元素,所以他们无法在一行显示

image-20201216135610015

转换成行内元素

给div再上如下样式

display: inline-block;

image-20201216135825026

这样 会有但是还有有间隙,我们还得设置。

浮动

我们为了达到我们所需要的结果这样加入

float: left;

image-20201216140203578

什么是浮动

总结:

一切元素都有float属性,float属性用于创建浮动框,将其移动到一边,动到浏览器 父框 或者 另一个浮动框的左(右)边缘,上边缘浮动到他们可以达到的最大边缘。

float:值;

描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。

例如

    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .right {
            background-color: pink;
            float: right;
        }

        .left {
            background-color: aqua;
            float: left;
        }
    </style>

    <div class="right">
        右
    </div>
    <div class="left">
        左
    </div>

image-20201216142422451

这个就是浮动到浏览器的边缘。

浮动特性

  1. 浮动元素脱离了标准控制流的规则,脱标。
  2. 浮动元素是按照每个块级元素的顶部开始对齐的。
  3. 浮动元素具有行内块元素。

脱标

  1. 不是按照浮动元素的控制
  2. 浮动元素不占用标准元素的位置。就好像浮在标准元素之上一样
    <style>
        .b {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .f {
            width: 100px;
            height: 100px;
            float: left;
            background-color: pink;
        }
    </style>
    <div class="f">我是浮动盒子</div>
    <div class="b">我是标准盒子</div>

image-20201216143806276

强调:我们如果改变了 f 和 b 的顺序 f 的上边缘只会浮动到第一个盒子的下边缘。

虽然不占用盒子的位置,这里的文字显然也被挤过去了。

多个盒子浮动

        div {
            width: 300px;
            height: 100px;
            background-color: plum;
            border: 1px solid black;
            float: left;
        }

    </style>
    <div style="height: 200px;">1</div>
    <div>2</div>
    <div style="height: 300px;">3</div>
    <div>4</div>

这里的盒子有些的高度不同,但是他们是(按照上一行的底部的标准)顶部水平对齐的。

image-20201216145049431

当然这是满足一行的情况,我调节一下浏览器的尺寸,他们宽度不够的话会自动移动到下一行的

宽度小于 1200px 下去一个

image-20201216145626714

宽度小于900px 下去两个

image-20201216145951526

浮动的元素具有行内块元素性质

只要一个元素设置了行内元素,那么就可以把它当成行内块元素,这个特性对于我来理解就是,行内元素如<span>就可以直接设置高度和宽度了,不需要display:inline-block

浮动元素在标准流的盒子里

我们浮动元素经常搭配着标准流的盒子来使用,这是为了限制浮动的盒子的位置

那么网页布局的时候经常使用标准流的父元素来排列上下位置,之后内部的子元素采取浮动来排列水平左右的位置。

image-20201216151311358

结语

如有错误欢迎大家指出。
79A59EF56224B22753145CEA8E88BAA2-dfc4efa7ed3d4a6480b9233445c2e872

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2020/12/16/c-s-s--fu-dong-1-
最后更新于:  140  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟