美文网首页
浮动Float

浮动Float

作者: 未路过 | 来源:发表于2022-09-01 08:42 被阅读0次

    1.基本概念

    float 属性可以指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。
    设置float就会脱离标准流,但是不会覆盖上面顶下来的元素。

    2. 浮动规则1:

    2.1 元素一旦浮动后, 脱离标准流

    朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
    定位元素会层叠在浮动元素上面

    2.2 如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界

    2.3 浮动元素之间不能层叠

    如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
    如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止


    image.png

    2.4 浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出

    比如行内级元素、inline-block元素、块级元素的文字内容


    image.png

    2.5 规则五: 行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐。浮动只能向左,或者向右浮动,不能向上或者向下。

    image.png

    3.浮动的特点

    行内元素、行内块元素、块级元素均可设置浮动属性 float,值为:none(默认) / left / right,设置值为 left 或 right 后,可实现元素向左浮动或向右浮动,浮动后的元素不同于原来的三种显示模式,具有自己的特点:
    1、浮动的元素会脱离文档流,多个浮动的兄弟元素会水平排列、自动换行。
    2、浮可以随意设置宽高,不分行内元素或者块级元素,strong也可以直接设置宽高
    ,但默认宽高被其内容撑开。
    3、浮动的元素可以完美地设置4个方向的内外边距,且不存在 margin 塌陷 和 margin合并 的问题。

    4.浮动常用的场景

    解决行内级元素、inline-block元素的水平间隙问题
    对于span元素,就算是并列,他们之间还是有间隙。


    image.png

    那是因为span和span之间有换行符,删除之后就没有空隙了

    image.png

    不换行的化,阅读性差,一定要换行。
    所以将间隙去除的方法:
    将多个行内级元素中间的空格(间隙)去除的方法

    1. 删除换行符(不推荐)
    2. 将父级元素的font-size设置为0, 但是需要子元素设置回来。就是解析的父亲里面的元素里面的空格是没有font-size的,所以是没有间隙的,但是span一定要设置font-size。
    3. 通过子元素(span)统一向一个方向浮动即可。浮动元素是紧挨者的。
    4. flex布局

    5.float的问题

    浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
     父元素计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题
    ◼ 解决父元素高度坍塌问题的过程,一般叫做清浮动(清理浮动、清除浮动)
    ◼ 清浮动的目的是
     让父元素计算总高度的时候,把浮动子元素的高度算进去
    ◼ 如何清除浮动呢? 使用clear属性

    父元素里面的孩子设置成float之后,父元素就没有高度了。父亲的背景颜色就看不到了。下面的元素就移动上来,盯上了的元素就在float的元素下面,视觉上是重叠了。脱镖元素改在标准流元素上面。

    5.1 clear属性

    Css属性-clear
    ◼ clear属性是做什么的呢? 
    clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
    ◼ clear的常用取值
     left:要求元素的顶部低于之前生成的所有左浮动元素的底部
     right:要求元素的顶部低于之前生成的所有右浮动元素的底部
     both:要求元素的顶部低于之前生成的所有浮动元素的底部
     none:默认值,无特殊要求
    ◼ 那么我们可以利用这个特性来清除浮动.

    给浮动的元素后面加一个div ,设置属性clear:both。而且一般情况下,不会给他设置高度
    .line{
    Clear:both
    }
    弊端:如果很多地方都需要浮动,那么每个部分都需要加div,设置class为line,增加了无意义的空标签。而且float(css)产生的问题需要用html(增加空div)元素来解决,违背结构与样式分离的原则。

    而且我们就是想给父元素里面增加一个元素,给父元素增加一个伪元素,为元素也是元素。伪元素是行内级非替换元素,设置content为空,就没有宽高,需要设置display为block,这样才会有宽度,因为块级元素独占一行。只要是需要清除浮动的父元素,就给他加这个属性。
    .clear_fix:after{
    Content:””;
    Clear:both;
    Display:block
    }

    以下是固定写法,进行浏览器兼容。


    6.浮动的应用

    浮动就是块级元素想横着放在一列。Inline-block的化会有换行符号和空格产生的间隙。
    网上的一些列表
    清楚固定样式

        ul, li{
          list-style: none;
          padding: 0;
          margin: 0;
        }
    

    没有border的时候。

    image.png
    style>
        /* 公共的class */
        .content {
          width: 1190px;
          margin: 0 auto;
          background-color: orange;
        }
    
        /* 布局样式 */
        .box {
          /* margin: 0 -5px; */
          /* 3.方案三: 设置负的的margin(没有兼容性) */
          margin-right: -10px;
        }
        .item {
          width: 230px;
          height: 322px;
          background-color: purple;
          color: #fff;
          /* 浮动 */
          float: left;
          margin-right: 10px;
          /* margin: 0 5px; */
        }
        /* 1.有可能存在兼容性 */
        /* .item:nth-child(5n) {
          margin-right: 0;
        } */
        
        /* 2.麻烦一点点 */
        /* .item.last-item {
          margin-right: 0;
        } */
      </style>
    </head>
    <body>
      
      <div class="content">
        <div class="box">
          <div class="item item1">1</div>
          <div class="item item2">2</div>
          <div class="item item3">3</div>
          <div class="item item4">4</div>
          <div class="item item5 last-item">5</div>
        </div>
      </div>
    /body>
    </html>
    

    1.宽度是一定的,就设置一个公共的类,写死,给他一个固定宽度。
    /* 公共的class */
    .content {
    width: 1190px;
    margin: 0 auto;
    background-color: orange;
    }
    2.网里面放div,让这些div浮动
    230+230+230+230+230=1150,设置margin-right为10,总共1190,但是最右面放不下,就往下一行放了,就设置


    image.png
    .item:nth-last-child(1) {
          margin-right: 0;
    } 
    或者
    .item:nth-child(5n) {
          margin-right: 0;
    } 
    或者
    给每第五个元素加一个class ,比如last-item
    然后
    .item.last-item{
    margin-right: 0;
    }
    这种相对来说比较麻烦,要给第五个加class,但是没有兼容性问题,容易给class加错。
    

    浮动兼容性更好,再加了一个新的结构伪类,兼容性比较差。Ie6-8不兼容nth-child.
    以上3个方法都不想使用,怎么办呢?
    3.给所有的item外面再包裹一个div。然后给他的margin-right设置一个-10px. 然后就成功了。


    image.png

    4.4.往1190宽的盒子里放了一个box,这个box的默认宽度auto也是1190.
    父级盒子宽度 = 子元素宽度 + ml + mr, 因为ml和mr默认值为0,所以子元素宽度也为1190. 刚才把这个子盒子的mr设置成-10,所以子元素的宽度就是1120. 1120的化就可以装下第五个元素230和他的mr10了。以前装不下他的mr10.
    大概是这个样子


    image.png

    最外面的盒子1190,里面的盒子1200,刚好(230+10)*5 = 1200,所以不会掉到第二行。
    绿色的大盒子里面有个粉色的长盒子。所以1200的盒子不是剧中的,但是1190的盒子是居中的。

    image.png

    Flex也可以解决,但是ie678不兼容。


    image.png

    以上也是向左浮动,给margin-right设置负值


    image.png
    image.png
    1.整体给一个边框,其他的item设置border-right,但是最后一个会重复。又给外面加,又给里面加,不好控制。
    2,单独给每一个设置边框,然后给每一个border-right:none,最后一个没有,这个时候给外面大框加右边,或则给第五个加一个右边框。

    3.所有的item都加border,但是中间的都是重复的。(推荐)
    大盒子》中盒子》item们
    1100 5个盒子,border-box,每个220,其中左右两个border。
    丹斯这个时候中间都是重复的。然后,
    给item设置margin-left设置-1px,让元素往左移动1px。Flex是没有兼容性的。
    这个时候后面会有剩余,因为少了(重叠了)5px,第一个也会移动,因为父子左右margin不会传递,


    image.png
    这个是给item设置ml为-50的时候。第一个元素相对于父亲向右移动了20px.
    image.png

    这个是设置+50的时候。

    所以宽度减少了5px,我们这个时候只需要给每个border-box设置的宽度增加1px,为221px。
    这个时候其实发现,右边是突出一个像素的。


    image.png

    其实肯定有一个方向是突出的,要么是左边,要么是右边。
    1+219 + 1 + 219+ 1 + 219+ 1 + 219+ 1 + 219 + 1 =1101,这个1px是多出来的。要么把这个像素放到左面,要么放到右面。

    或者给某个item的宽度减1px

    1.border给谁加,(给每个item加)
    2.加上border之后,宽度如何计算。( 220* 5 = 1100 )每个盒子220px
    3.中间4个线是粗的。给每个都设置margin-left为-1. 重叠,少了5px.
    4.给每个宽度增加1px。变成221px.

    7.布局方案总结

    image.png

    相关文章

      网友评论

          本文标题:浮动Float

          本文链接:https://www.haomeiwen.com/subject/fqrjnrtx.html