码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 浮动布局注意点,清除浮动


    浮动和标准流的父盒子搭配

    先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

    一个元素浮动了,理论上其余的兄弟元素也要浮动

    一个盒子里面有多个子盒子,如果其中一个盒子浮动了那么其他兄弟也应该浮动,以防引起问题。
    浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

    清除浮动

    由于父级盒子很多情况下,不方便给高度,但是盒子子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子
    在这里插入图片描述

    • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响

    清除浮动的本质

    • 清除浮动的本质是清除浮动元素造成的影响
    • 如果父盒子本身有高度,这不需要清除浮动
    • 清除浮动后,父级就会根据子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了
    • 在这里插入图片描述

    清除浮动方法

    1. 额外标签法也称为隔墙法,是W3C推荐的做法
    2. 父级添加overflow属性
    3. 父级添加after属性
    4. 父级添加双伪元素
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
  • 相关阅读:
    Python数据容器:set(集合)
    vue2中,vue-easytable组件的使用(三)——实现表格的虚拟滚动功能
    【论文速读】| 大语言模型引导的协议模糊测试
    C++ Reference: Standard C++ Library reference: C Library: cwctype: iswdigit
    uniapp学习笔记之知识点大总结
    springBoot集成ClickHouse
    数据结构——空间复杂度
    Python对象的内置方法(__del__和__str__)的介绍和使用
    Matlab对多个输入信号进行数值排序提取特定值
    Spring Boot 集成freemarker模板引擎
  • 原文地址:https://blog.csdn.net/Aa12364567/article/details/126178979
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号