简单理解float浮动

简介: 简单理解float浮动

原本意义:实现文字环绕效果


BFC Block formatting context

块级格式化上下文


具有包裹性属性

display:inline-block/table-cell

position:absolute/fixed/sticky

verflow:hidden/scroll


破坏

容器被破坏, 父元素高度塌陷


display:none

position:absolute/fixed/sticky


清除浮动

html元素底部: clear:both

css伪元素底部:.clearfix:after{}


应用于包含浮动子元素的父级元素上

/* IE8 */
.clearfix:after{
    content:"";
    display:block;
    height:0;
    overflow:hidden;
    clear:both;
}

/* IE6, IE7 */
.clearfix{
    *zoom:1;
}

浮动

1、元素block块状化(砖头化)

2、破坏性造成的紧密排列特性(去空格化)

            </div>
目录
相关文章
|
Java 程序员
java基础(5)标识符命名规则和命名规范
Java标识符命名规则包括只能使用数字、字母、下划线\_、$,且数字不能开头,不能使用关键字命名,且严格区分大小写。命名规范建议类名、接口名首字母大写,变量名、方法名首字母小写,常量名全大写。
541 2
|
9月前
|
移动开发 前端开发 API
鸿蒙web加载本地网页资源异常
在鸿蒙NEXT Api 12中,为解决Web组件加载本地资源(如图片、CSS等)失败的问题,我们采用拦截机制。具体步骤如下: 1. **替换路径**:通过正则表达式将HTML和CSS中的资源路径替换为带有标记的URL(如`http://local`),以便后续识别。 2. **拦截与返回**:在资源加载时,拦截带有标记的URL,读取对应的本地文件并返回给Web组件。此过程确保了本地资源能正确加载和显示。 代码实现包括路径替换、资源拦截及响应构建,确保Web页面能够顺利加载本地资源。
520 7
|
SQL druid Java
线程池相关故障问题之Druid数据库连接池中,为何需要设置TransactionTimeout
线程池相关故障问题之Druid数据库连接池中,为何需要设置TransactionTimeout
694 0
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
移动开发 JavaScript 前端开发
如何使用 JavaScript 进行跨域请求?
如何使用 JavaScript 进行跨域请求?
|
传感器 语音技术
STM32智能小车(循迹、跟随、避障、测速、蓝牙、wife、4g、语音识别)总结-1
STM32智能小车(循迹、跟随、避障、测速、蓝牙、wife、4g、语音识别)总结
STM32智能小车(循迹、跟随、避障、测速、蓝牙、wife、4g、语音识别)总结-1
|
数据管理 API 调度
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
1887 0
|
负载均衡 Java Nacos
SpringCloud微服务之微服务SpringCloud实用篇02
SpringCloud微服务之微服务SpringCloud实用篇02
1046 0
|
容灾
《阿里异地多活与同城双活的架构演进》电子版地址
阿里异地多活与同城双活的架构演进
550 0
《阿里异地多活与同城双活的架构演进》电子版地址
|
运维 Cloud Native 数据可视化
阿里云BizWorks重磅发布:企业级云原生应用数字工作台
BizWorks是一体化的云原生应用的开发和运营平台,内置阿里业务中台构建的最佳技术实践。产品主要包括:业务建模平台、一体化应用构建与运行平台、业务测试与演练平台、业务运营与治理平台。BizWorks提供的产品能力,普遍适用于企业云原生应用高效开发以及企业资产沉淀和复用的场景。
1502 0
阿里云BizWorks重磅发布:企业级云原生应用数字工作台