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

    总结:

相关推荐
珍宝商店10 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖20 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒20 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser22 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan25 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family27 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_41 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理1 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发1 小时前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql