简单理解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>
目录
相关文章
|
监控 关系型数据库 数据库
OceanBase数据库常见问题之文件存在但是数据库提示文件不存在如何解决
OceanBase 是一款由阿里巴巴集团研发的企业级分布式关系型数据库,它具有高可用、高性能、可水平扩展等特点。以下是OceanBase 数据库使用过程中可能遇到的一些常见问题及其解答的汇总,以帮助用户更好地理解和使用这款数据库产品。
|
前端开发 JavaScript Java
Layui的入门级教学,基本使用及如何实现登入与注册页面
Layui的入门级教学,基本使用及如何实现登入与注册页面
650 0
|
监控 安全 网络安全
SOC:简介、功能及其优点
【8月更文挑战第19天】
1515 0
|
10月前
|
Ubuntu Shell Linux
环境变量简介
环境变量简介
|
运维 安全 网络性能优化
|
人工智能 测试技术
语言图像模型大一统!Meta将Transformer和Diffusion融合,多模态AI王者登场
【9月更文挑战第20天】Meta研究人员提出了一种名为Transfusion的创新方法,通过融合Transformer和Diffusion模型,实现了能同时处理文本和图像数据的多模态模型。此模型结合了语言模型的预测能力和Diffusion模型的生成能力,能够在单一架构中处理混合模态数据,有效学习文本与图像间的复杂关系,提升跨模态理解和生成效果。经过大规模预训练,Transfusion模型在多种基准测试中表现出色,尤其在图像压缩和模态特定编码方面具有优势。然而,其训练所需的大量计算资源和数据、以及潜在的伦理和隐私问题仍需关注。
336 7
|
Java Android开发 C++
🚀Android NDK开发实战!Java与C++混合编程,打造极致性能体验!📊
【7月更文挑战第28天】在 Android 开发中, NDK 让 Java 与 C++ 混合编程成为可能, 从而提升应用性能。**为何选 NDK?** C++ 在执行效率与内存管理上优于 Java, 特别适合高性能需求场景。**环境搭建** 需 Android Studio 和 NDK, 工具如 CMake。**JNI** 构建 Java-C++ 交互, 通过声明 `native` 方法并在 C++ 中实现。**实战** 示例: 使用 C++ 计算斐波那契数列以提高效率。**总结** 混合编程增强性能, 但增加复杂性, 使用前需谨慎评估。
458 4
|
存储 NoSQL Java
10张流程图+部署图,讲透单点登录原理与简单实现
10张流程图+部署图,讲透单点登录原理与简单实现
462 1
10张流程图+部署图,讲透单点登录原理与简单实现
|
安全 机器人 Shell
【靶机】Windows渗透初体验-Steel Mountain
本靶机是windows版的mr robot,难度适中,值得一做。
460 0
|
存储 测试技术 数据库
【C语言课程设计】图书管理系统
【C语言课程设计】图书管理系统
430 0