CSS清除浮动的多种方法

目录

非 VIP 用户可前往公众号回复“css”进行免费阅读

给浮动元素的祖先元素加高度

给 div 写一个 clear:both; 属性(margin 失效)

clear:both; 隔墙法

clear:both; 内墙法

父级 div 定义伪类:after 和 zoom(推荐使用)

overflow:hidden;(能够让 margin 生效)


非 VIP 用户可前往公众号回复“css”进行免费阅读

给浮动元素的祖先元素加高度


        当一个元素要浮动时,其祖先元素有高度才能限制住浮动元素的范围。就像是有高度的盒子才能把浮动元素 “关住”。

        备注:这种方法不推荐普遍使用,仅在布局高度固定的情况下可以考虑使用。

        示例代码如下:

        css:

<style type="text/css">  
    li{  
        float: left;  
        width: 100px;  
        height: 100px;  
        background-color: skyblue;  
        text-align: center;  
        margin-right:10px;  
    }  
    div{  
        height:120px;  
    }  
</style>  

        html:

<body>  
    <div>  
        <ul>  
            <li>div1-li</li>  
            <li>div1-li</li>  
        </ul>  
    </div>  
    <div>  
        <ul>  
            <li>div2-li</li>  
            <li>div2-li</li>  
        </ul>  
    </div>          
</body>  

        运行结果:

给 div 写一个 clear:both; 属性(margin 失效)


        在网页制作中,高度 height 属性不常被直接设置,因为很多时候元素的高度是由内容自动撑起来的。当给 div 设置 clear:both; 属性来清除浮动时,会出现一个严重的问题,即 margin 属性会失效。

clear:both; 隔墙法


        此方法通过一个具有 clear:both; 属性(.cl 类)并且有一定高度(.h16 类)的 div 元素,如:

<div class=

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/883494.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

九、成功版--windows上安装artifactory配置postgressql

centos上搞不定&#xff0c;windows上搞定了 现阶段是想用java写程序控制制品库&#xff0c;等以后研究多了需要写一些脚本的时候&#xff0c;在研究linux上安装artifactory&#xff08;公司就用的linux安装的配置mysql&#xff0c;有空对着配一下linux的&#xff09; 源码地…

文献管理不再难:20个Zotero插件帮你搞定

以下插件排序按照星标量进行排序&#xff0c;常用的插件大概是前20的样子&#xff0c;可以根据自己的需求进行插件的安装。 顺带提一句&#xff0c;插件不是越多越好&#xff0c;装多了可能会出现软件卡顿的情况。 1、Scholaread for Zotero 插件下载&#xff1a;插件下载 …

【智能大数据分析 | 实验一】MapReduce实验:单词计数

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…

阿里云云效多个ssh密钥对配置

实现功能 windows本地多个ssh密钥对,分别对应不同的阿里云账号的云效 实现办法 1.生成ssh密钥对 ssh-keygen -t rsa -f C:\xxx\id_rsa_customname(我这里C:\Users\admin\.ssh\id_rsa_customname) 2.配置.ssh目录的config文件 # ruiyi Host customnameHostName codeup.al…

java通过org.eclipse.milo实现OPCUA客户端进行连接和订阅

前言 之前写过一篇关于MQTT的方式进行物理访问的文章&#xff1a;SpringBoot集成MQTT&#xff0c;WebSocket返回前端信息_springboot mqtt websocket-CSDN博客 最近又接触到OPCUA协议&#xff0c;想通过java试试看能不能实现。 软件 在使用java实现之前&#xff0c;想着有没…

JVM 基础知识(基础组成 )

使用场景 线上系统突然宕机,系统无法访问,甚至直接 O0M;线上系统响应速度太慢,优化系统性能过程中发现 CPU 占用过高,原因也许是因为 JVM的 GC 次数过于频繁;新项目上线,需要设置 JVM的各种参数;等 JDK / JRE / JVM JDK JDK 全称 ( Java Development Kit ) &#xff0c;是 Ja…

react + antDesign封装图片预览组件(支持多张图片)

需求场景&#xff1a;最近在开发后台系统时经常遇到图片预览问题&#xff0c;如果一个一个的引用antDesign的图片预览组件就有点繁琐了&#xff0c;于是在antDesign图片预览组件的基础上二次封装了一下&#xff0c;避免重复无用代码的出现 效果 公共预览组件代码 import React…

Llama 3.2来了,多模态且开源!AR眼镜黄仁勋首批体验,Quest 3S头显价格低到离谱

如果说 OpenAI 的 ChatGPT 拉开了「百模大战」的序幕&#xff0c;那 Meta 的 Ray-Ban Meta 智能眼镜无疑是触发「百镜大战」的导火索。自去年 9 月在 Meta Connect 2023 开发者大会上首次亮相&#xff0c;短短数月&#xff0c;Ray-Ban Meta 就突破百万销量&#xff0c;不仅让马…

xpath在爬虫中的应用、xpath插件的安装及使用

安装 1、打开谷歌浏览器进入扩展程序安装页面(右上角会有"开发者模式按钮")默认是关闭的&#xff0c;当安装此插件时需要把开发者模式打开。 2、下载下来的xpath_helper是zip格式的&#xff0c;需要解压缩即可安装。 3、重启浏览器&#xff0c;再次点击扩展程序即…

解密 Python 的 staticmethod 函数:静态方法的全面解析!

更多Python学习内容&#xff1a;ipengtao.com 在 Python 中&#xff0c;staticmethod 函数是一种装饰器&#xff0c;用于将函数转换为静态方法。静态方法与实例方法和类方法不同&#xff0c;它们不需要类实例作为第一个参数&#xff0c;也不需要类作为第一个参数&#xff0c;因…

微型丝杆的行业应用!

微型丝杆作为一种高精度、小尺寸的机械传动元件&#xff0c;在现代工业中扮演着重要角色&#xff0c;在多个行业中都有广泛的应用‌&#xff0c;主要包括以下几个方面&#xff1a; 1、医疗设备&#xff1a;在手术机器人中&#xff0c;微型丝杆能够实现精准定位和操作&#xff0…

二叉树进阶

目录 1. 二叉搜索树实现 1.1 二叉搜索树概念 2.2 二叉搜索树操作 ​编辑 ​编辑 2.3 二叉搜索树的实现 2.3.0 Destroy() 析构 2.3.1 Insert&#xff08;&#xff09;插入 2.3.2 InOrder&#xff08;&#xff09; 打印搜索二叉树 ​编辑​编辑 2.3.3 Find() 查找 …

GaussDB关键技术原理:高弹性(五)

书接上文GaussDB关键技术原理&#xff1a;高弹性&#xff08;四&#xff09;从扩容流程框架方面对hashbucket扩容技术进行了解读&#xff0c;本篇将从日志多流和事务相关方面继续介绍GaussDB高弹性技术。 目录 4.2 日志多流 4.2.1 日志多流总体流程 4.2.2 基线数据传输 4.…

fiddler抓包07_抓IOS手机请求

课程大纲 前提&#xff1a;电脑和手机连接同一个局域网 &#xff08;土小帽电脑和手机都连了自己的无线网“tuxiaomao”。&#xff09; 原理如下&#xff1a; 电脑浏览器抓包时&#xff0c;直接就是本机网络。手机想被电脑Fiddler抓包&#xff0c;就要把Fiddler变成手机和网络…

PMP与CMMI:两种管理方法的对比

PMP与CMMI&#xff1a;两种管理方法的对比 PMP&#xff1a;专注于项目管理CMMI&#xff1a;组织过程改进的框架总结&#xff1a;互补而非替代 在现代企业管理中&#xff0c;项目管理和组织能力成熟度模型集成&#xff08;CMMI&#xff09;是两个经常被提及的概念。虽然它们都是…

vue3中echarts柱状图横轴文字太多放不下怎么解决

问题&#xff1a;在做数据展示的时候&#xff0c;使用的是echarts&#xff0c;遇到了个问题&#xff0c;就是数据过多&#xff0c;但是设置的x轴的文字名称又太长&#xff0c;往往左边第一个或右边最后一个的名称展示不全&#xff0c;只有半个。 从网上找到了几种办法&#xff…

项目实战:Qt+OSG爆破动力学仿真三维引擎测试工具v1.1.0(加载.K模型,子弹轨迹模拟动画,支持windows、linux、国产麒麟系统)

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/142454993 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、Op…

Vue74 路由的props配置

笔记 ​ 作用&#xff1a;让路由组件更方便的收到参数 {name:xiangqing,path:detail/:id,component:Detail,//第一种写法&#xff1a;props值为对象&#xff0c;该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法&#xff1a;props…

edu某智慧平台 ExpDownloadService.aspx接口任意文件读取漏洞复现 [附POC]

文章目录 edu某智慧平台 ExpDownloadService.aspx接口任意文件读取漏洞复现 [附POC]0x01 前言0x02 漏洞环境0x03 漏洞复现1.访问漏洞环境2.构造POC3.复现edu某智慧平台 ExpDownloadService.aspx接口任意文件读取漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内的相关技…

统信服务器操作系统进入【单用户模式】

统信服务器操作系统D版、E版、A版进入单用户模式的方式。 文章目录 前言一、问题现象二、问题原因三、解决方案1. D版问题解决方案2. E版及A版问题解决方案前言 D版又称企业版、E版又称欧拉版、A版又称龙蜥版。 单用户模式主要是在 grub2 引导时编辑内核引导,一般用于修改用…