CSS之浮动

目录

浮动

常见网页布局

  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;
      }

    总结:

相关推荐
全宝20 分钟前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴1 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉1 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
大熊猫今天吃什么2 小时前
【一天一坑】空数组,使用 allMatch 默认返回true
前端·数据库
!win !3 小时前
Tailwind CSS一些你需要记住的原子类
前端·tailwindcss
前端极客探险家3 小时前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
橘子味的冰淇淋~3 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
利刃之灵3 小时前
03-HTML常见元素
前端·html