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

    总结:

相关推荐
qq. 28040339846 小时前
CSS层叠顺序
前端·css
喝拿铁写前端6 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.6 小时前
vue 路由
前端·javascript·vue.js
烛阴7 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91537 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing7 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学8 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪8 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡8 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪8 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试