css 清除浮动float 嗒嘀嗒滴 ----20181120

  1. 手动给父元素添加高度
  2. 通过clear清除内部和外部浮动
  3. 给父元素添加overfloat属性并结合zoom:1使用
  4. 给父元素添加浮动        

    常用方法:

      ```给兄弟元素添加clear属性:添加一个class为clear:both,

      ```添加伪类:.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容;

                      content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。

                      display: block;   <----加入的这个元素转换为块级元素。

                      clear: both;     <----清除左右两边浮动。

                      visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;

                      height: 0;     <----高度为0;

                      font-size:0;    <----字体大小为0;

                   }

      '''给父元素添加after伪类

              .clearfix::before,

              .clearfix::after{

                        content: ".";display: block; height: 0;overflow: hidden;

                     }

               .clearfix:after{

                         clear: both;

                      }

                .clearfix {

                        zoom: 1; /* IE < 8 */

                    }

         `````给外层div加.clearfix:after {visibility: hidden; 和display的区别 前者隐藏行列还占据空间   display: block; 必须写  font-size: 0;

                          content: " "; 必须写

                          clear: both; 必须写

                          height: 0; 必须写

                        }

转载于:https://www.cnblogs.com/520Girl/p/9991397.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微软最爽命令行工具发布!

最近微软发布了命令行工具Windows Terminal&#xff0c;简直要让我们爽翻天 长期以来&#xff0c;Linux和Mac下的命令行工具自成一派&#xff0c;Windows却是另一套命令系统。这就比较恶心了&#xff0c;这也是很多开发者不选择Windows系统的原因。 但是现在完全不一样了&#…

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园

在开发vue项目中&#xff0c;请求是不可缺少的&#xff0c;在发送请求时常常需要统一处理一些请求头参数等设置与响应事件&#xff0c;这时利用请求拦截器再好不过。 这里以axios请求为例 实现了设置统一请求头添加token, 其中token在登录时被存入了localStorage中。 同时拦…

gitbook 入门教程之解决windows热加载失败问题

破镜如何贴花黄 gitbook 在 Windows 系统无法热加载,总是报错! gitbook 是一款文档编写利器,可以方便地 markdown 输出成美观优雅的 html ,gitbook serve 启动服务器后,原来相貌平平的 markdown 丑小鸭摇身一变就成了倾国倾城的 html 绝色佳人. 如果源文件发生更改,Windows 却无…

NodeJS入门04-Express路由和中间件 - 小之 - 博客园

nodeJS入门04-Express路由和中间件 Express框架是后台的Node框架&#xff0c;在后台的受欢迎的程度&#xff0c;和jQuery一样&#xff0c;就是企业的事实上的标准。 路由 路由是指如何定义应用的端点&#xff08;URIs&#xff09;以及如何响应客户端的请求。 路由是由一个 …

jmeter(四十五)常用Beanshell脚本

整理了一批jmeter常用的beanshell脚本供大家参考&#xff01; 时间戳 import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; try{ Date date new Date(); //获取当前时间 SimpleDateFormat sf new SimpleDateFormat("yyyy-MM-dd HH:mm…

nodejs开发 过程中express路由与中间件的理解 - pyj063 - 博客园

nodejs开发 过程中express路由与中间件的理解 nodejs开发 express路由与中间件 路由 通常HTTP URL的格式是这样的&#xff1a; http://host[:port][path] http表示协议。 host表示主机。 port为端口&#xff0c;可选字段&#xff0c;不提供时默认为80。 path指定请求资源的…

(五)Unity插件生成

1&#xff09;新建空的AndroidStudio工程&#xff0c;但是新建过程时最小SDK版本要与unity一致&#xff0c;如下图所示&#xff0c;本次操作均为api16 2&#xff09;创建Library&#xff0c;如下图所示&#xff0c;新建module&#xff0c;然后选择Android Library。 新建模块为…

centeros7安装mysql - 风中追风_lonely - 博客园

转载自&#xff1a;https://www.linuxidc.com/Linux/2016-09/135288.htm 安装之前先安装基本环境&#xff1a;yum install -y perl perl-Module-Build net-tools autoconf libaio numactl-libs 1、配置YUM源 在MySQL官网中下载YUM源rpm安装包&#xff1a;http://dev.mysql.c…

前后端交互json字符串

//将需要的参数转成json字符串&#xff0c;然后用utf-8编码 var obj encodeURIComponent(JSON.stringify(this.categories),"utf-8") //后台将前台的json字符串按照utf-8的格式解码&#xff0c;然后进行转换 RequestMapping(value "/updateMaterialDemoInfo.d…

个人作业7 第一阶段SCRUM冲刺(七)

了解了一下云服务器&#xff0c;下载了阿里云。 然而搞了半天还是没应用上这个云服务器..转载于:https://www.cnblogs.com/jbwen/p/11071733.html

Dcloud HTML5 监听蓝牙设备 调用 原生安卓实现 - aspirant - 博客园

最近一直搞Dcloud &#xff0c;这是HTML5版本的开发&#xff0c;打包时候&#xff0c;可以打包成 apk 和ipa 分别运行在安卓和ios 机器上面&#xff0c; 但是这里面的资料很少&#xff0c;遇到问题&#xff0c;之后只能自己钻研总结&#xff0c; 现在有这么一个需求&#xff…

Django forms组件

校验字段 模板文件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <form action"" method"post"><p>用户名: <…

为什么要用TypeScript - 肉猪 - 博客园

为什么要用TypeScript 以下是本人的一点拙见&#xff0c;欢迎指正。 TypeScript的设计目的应该是解决JavaScript的“痛点”&#xff1a;弱类型和没有命名空间&#xff0c;导致很难模块化&#xff0c;不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向…

java继承上机作业

实现如下类之间的继承关系&#xff0c;并编写Music类来测试这些类。 1 package su;2 3 class Instrument{4 public void play() {5 System.out.println("弹奏乐器");6 }7 8 public void play2() {9 // TODO 自动生成的方法存根 10 …

前端之模拟数据 - HackerVirus - 博客园

阅读目录 玩转前端之模拟数据 回到目录 玩转前端之模拟数据 博客园主页&#xff1a;http://www.cnblogs.com/handoing/ 是否还在为前端模拟数据头疼&#xff1f; 是否还在为后端返回数据格式较多内心烦躁&#xff1f; 是否还想吸一支烟压压精&#xff1f; 看下去吧&#x…

Spring Cloud Gateway(五):路由定位器 RouteLocator

本文基于 spring cloud gateway 2.0.1 1、简介 直接 获取 路 由 的 方法 是 通过 RouteLocator 接口 获取。 同样&#xff0c; 该 顶 级 接口 有多 个 实现 类&#xff0c; RouteLocator 路由定位器&#xff0c;顾名思义就是用来获取路由的方法。该路由定位器为顶级接口有多个实…

【NOIP2018】DAY2T2——填数游戏(轮廓线状压的dp?搜索打表)

描述 小 D 特别喜欢玩游戏。这一天&#xff0c;他在玩一款填数游戏。 这个填数游戏的棋盘是一个n m的矩形表格。玩家需要在表格的每个格子中填入一个数字&#xff08;数字 0 或者数字 1&#xff09;&#xff0c;填数时需要满足一些限制。 下面我们来具体描述这些限制。 为了方…

团队开发进度报告9

&#xff08;1&#xff09;站立会议 &#xff08;2&#xff09;任务面板 &#xff08;3&#xff09;具体内容 昨天&#xff1a;完成了界面控件按钮的设置问题&#xff1a;PHP数据处理&#xff0c;如何实现在线数据交互问题今天&#xff1a;hbuilder后台环境搭建 转载于:https:/…

基于springboot多模块项目使用maven命令打成war包放到服务器上运行的问题

首先&#xff0c;大家看到这个问题&#xff0c;可能并不陌生&#xff0c;而且脑子里第一映像就是使用mava中的clear package 或者 clear install进行打包&#xff0c;然后在项目中的target文件夹下面找到xxx.war&#xff0c;将这个war包放到外置的tomcat服务器下的webapps下面&…

Kafka学习笔记(3)----Kafka的数据复制(Replica)与Failover

1. CAP理论 1.1 Cosistency(一致性) 通过某个节点的写操作结果对后面通过其他节点的读操作可见。 如果更新数据后&#xff0c;并发访问的情况下可立即感知该更新&#xff0c;称为强一致性 如果允许之后部分或全部感知不到该更新&#xff0c;称为弱一致性。 若在之后的一段时间&…