CSS之浮动

发布于:2024-05-13 ⋅ 阅读:(158) ⋅ 点赞:(0)

浮动

常见网页布局

  1. 本质:用CSS来摆放盒子,把盒子摆放到相应的位置
    三种常见布局方式:普通流(标准流)、浮动、定位
  2. 浮动常见布局:
    在这里插入图片描述

在这里插入图片描述

标准流(普通流、文档流)

即标签按照默认方式排列eg:块级元素独占一行、行内元素按顺序排列
最基本的布局方式

为什么需要浮动

网页浮动第一准则:多级块元素纵向排列标准流横向排列浮动

什么是浮动

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
在这里插入图片描述

浮动特性(重难)

  1. 脱标:浮动元素会脱离标准流,控制(浮)移动到指定位置(动),浮动的盒子不再保留原先位置
  2. 行显示:如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
  3. 具有行内块元素的属性,任何元素都可以浮动,不管原先是什么模式的元素,浮动后都具有行内块元素的特点,不需要转换模式
    tips:
    ①如果块级元素没有设置宽度,默认宽度和父级相同,添加浮动后,它的大小根据内容决定
    ②浮动的元素是互相间贴在一起的,没有缝隙,如果父级元素放不下这些元素,则会换行放置

注意:

  1. 浮动元素经常和标准流父级搭配使用
    约束浮动元素位置,采取的一般策略是:先用标准流父级元素排列上下位置,内部子元素采取浮动排列左右位置,符合网页布局第一准则
  2. 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

清除浮动

  1. 为什么?当父盒子不方便给高度,子盒子浮动又不占位置,是的父盒子高度为零,从而影响下面的标准流盒子

  2. 本质:清楚浮动元素造成的影响

  3. 语法格式:

    选择器 {
        clear: 属性值;
    }
    

    在这里插入图片描述

  4. 清除浮动的策略:闭合浮动

  5. 清除浮动方法:

    • 额外标签法:隔墙法
      在浮动元素的末尾添加一个空标签,这个空标签必须是块级元素,eg:<div style="clear:both"></div>,或者<br/>
      书写方便但会添加许多无意义的标签
    • 父级添加overflow属性
      给父级添加overflow属性,将其属性值设为hidden、auto、或scroll
      代码简洁但无法显示溢出部分
    • 父级添加after伪元素
      额外标签法的升级版
      语法格式:
    .clearfix:after {
        content: "";
        display:block;
        height:0;
        clear:both;
        visibility: hidden;
    }
    .clearfix {
        //IE6、7专有
        *zoom:1;
    }
    

    没有增加标签,结构更简单

    • 父级添加双伪元素
      给父元素添加
    .clearfix:before,
    .clearfix:after {
        content:"";
        display:table;
    }
    .clearfix:after {
        clear:both;
    }
    .clearfix {
        *zoom:1;
    }
    

    总结:在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到