CSS：当子元素皆浮动，撑开父元素的3种方式
1. 在子元素后面补充同级的空元素，并定义清除浮动样式
html文件
<main><div><span>肥水东流无尽期。当初不合种相思。梦中未比丹青见，暗里忽惊山鸟啼。</span><br><br><span>春未绿，鬓先丝。人间别久不成悲。谁教岁岁红莲夜，两处沉吟各自知。</span></div><div><span>肥水东流无尽期。当初不合种相思。梦中未比丹青见，暗里忽惊山鸟啼。</span><br><br><span>春未绿，鬓先丝。人间别久不成悲。谁教岁岁红莲夜，两处沉吟各自知。</span></div><article class="clearfix"></article></main>less文件
main{width: 800px;// height: 400px;border: dashed 2px #351F39;div{width: 300px;height: 300px;border: solid 2px black;margin: 30px;&:nth-of-type(1){span{text-indent: 4px;padding: 5px;letter-spacing: 2px;color: #FFB319;}writing-mode: vertical-rl;background-color: rgb(22,96,55);float: left;}&:nth-of-type(2){span{text-indent: 4px;padding: 5px;letter-spacing: 2px;color: #D89216;}writing-mode: vertical-rl;background-color: rgb(250,218,128);float: right;}}.clearfix{clear: both;}}可以看到mian元素下的两个div，一个向左浮动，一个向右浮动，而浮动元素不占用空间位，如果没有下面空的article，显示的效果是这样的——
现在加入article，并对类clearfix设置清除两边浮动样式，得到的结果是这样的——
这是因为article元素虽空，但是识别出了上面两个div的空间位，会占用更底部的空间位，由此把父元素main给撑开了。
3. 出发BFC机制，该机制不会让子元素和父元素重叠
即给父元素main加上
overflow:hidden;出处：后盾人 向军老师 bilibili
相关文章：
js正则表达式的使用详解
本文转自：http://www.jb51.net/article/39623.htm 1定义正则表达式2关于验证的三个这则表达式方法3正则表达式式的转义字符1定义正则表达式在js中定义正则表达式很简单，有两种方式，一种是通过构造函数，一种是通过//，也…
Python安装及netcdf数据读写
为什么80%的码农都做不了架构师？>>> 一、在CentOS7系统上安装Python3 在anaconda官网下载（http://https://www.anaconda.com/download/#linux）（Anaconda指的是一个开源的Python发行版本，是Python的包管理器…
用Visio进行数据库建模、设计和实现
用Visio进行数据库建模、设计和实现 摘要：Visio是微软著名的图形软件，功能强大。使用Visio完成绘图任务时能够显著地提高工作效率和质量。目前功能最全的Visio版本是VSEA(Visual Studio Enterprise Architect)2003所自带的2003版。 原文发表在中科院网络…
JavaScript如何声明对象、函数以及对象中的函数(即方法)
目录 声明对象的2种最常见方法 声明函数的2种最常见方法 在对象中声明函数 声明对象的2种最常见方法 1） var Zhihuijun {name:彭志辉,age:28,upName:稚晖君,company:Huawei,};console.log(Zhihuijun.name目前在Zhihuijun.company工作); 2） var Zhi…
python之抽象基类
抽象基类特点 1.不能够实例化 2.在这个基础的类中设定一些抽象的方法，所有继承这个抽象基类的类必须覆盖这个抽象基类里面的方法 思考 既然python中有鸭子类型，为什么还要使用抽象基类？ 一是我们在某些情况下希望判定某个对象的类型ÿ…
Poolmon
P 排序标记列表中的通过分页，无-分页或混合。请注意 P 循环通过每个。B 进行排序按最大字节使用情况的标记。M 按最大字节分配对标签进行排序。T 按标记名称按字母顺序排序标记。E 显示分页，跨底部未分页的总计。循环。A 按分配大小对标签进行排序。F 按…
移动网站性能优化（未完。。。）
移动网站天生有三种性能限制：带宽低，内存小，处理器性能低。 这些性能挑战又加上其他的问题，如： 网页比以前更大延迟相差巨大下载速度相差巨大解决问题： 改善网站性能的主要策略并没有因为从PC变成手机或者平…
JavaScript对象数组示例
可以用于暂时无法从数据库中拿到数据时，模拟数据使用 var datas [{name:囧菌,subject:JavaScript,grade:100 },{name : 双笙,subject : React,grade : 100 },{name:陈拾月,subject:Vue,grade:100 }]; 其实相当于 var datasInt [1,2,3]; 注意：是引号…
PHP协程：并发 shell_exec
在PHP程序中经常需要用shell_exec执行一些命令，而普通的shell_exec是阻塞的，如果命令执行时间过长，那可能会导致进程完全卡住。在Swoole4协程环境下可以用Co::exec并发地执行很多命令。 本文基于Swoole-4.2.9和PHP-7.2.9版本协程示例 <?p…
oralce 增加表字段命令|oralce 增加表字段类型命令
oralce 增加表字段命令 语法 alter table 表明 add 字段名 类型 alter table aqcuser add email varchar(36)转载于:https://www.cnblogs.com/bestsaler/archive/2010/09/08/1835430.html
mac 下周期调度命令或脚本
crontab 是在linux服务器上部署定时任务的方法0 5 * * * /usr/bin/python /data/www/tools/mysql_backup.pycmd之前有5个项目要填，分别对应分钟 小时 天 月 一周当中第几天( 0-6 ,0表示星期天)填写方法* 表示都满足，例如 * * * * * 表示每分钟执行一次&a…
JavaScript封装一个注册函数解决兼容问题
我们知道JavaScript注册(绑定)事件主要有两类方式，第一类传统方式具有注册事件的唯一性，即对于同一元素的同一事件，不会出现两个处理函数，如下 var btn document.querySelector(button);btn.onclick function(){document.body.s…
四种DCOM错误的区别,0x80080005 0x800706be 0x80010105 0x
四种DCOM错误的区别Differences between the following DCOM error0x800800050x800706be0x800101050x800706ba0x80080005:CO_E_Server_Exec_FailureServer execution failedIt is usually quite clear: COM (really, RPCSS) tried to launch a particular server process and e…
给django视图类添加装饰器
要将login_required装饰到view class的dispatch方法上， 因为dispatch方法为类方法，不是单个的函数，所以需要将装饰函数的装饰器 login_required转化为装饰类方法的装饰器，就要用到method_decorator . method_decorator的参数可以是…
JavaScript实现智能搜索框
应用场景： 1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。 2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容 解决思路： 1. 对整个页面添加键盘事件keyup…
搜索引擎技术之概要预览
搜索引擎技术之概要预览前言近些天在学校静心复习功课与梳理思路（找工作的事情暂缓），趁闲暇之际，常看有关搜索引擎相关技术类的文章，接触到不少此前未曾触碰到的诸多概念与技术，如爬虫，网页抓取…
Linux 守护进程，编写（转载）
设置守护进程过程：1.创建子进程，父进程退出2.在子进程中创建新会话3.改变当前目录为根目录4.重设文件权限掩码5.关闭文件描述符*6.守护进程里，忽略SIGCHLD信号 (即使fork两次，新进程由init接管，不进行signal(SIGCHLD,S…
RecycleView的notifyItemRemoved使用注意
转载请标明出处，维权必究：https://www.cnblogs.com/tangZH/p/10116095.html 我们为了移除RecycleView的某一项，会用RecycleView的notifyItemRemoved（int position）方法，但是需要注意的是：1、用该…
JavaScript实时更新中国标准时间
用到Date对象和BOM中的setInterval()定时器。 效果如下（每隔1s刷新一次） 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&q…
【转】Flex4:利用HttpService与ASP.NET传输JSON数据(登录为例)
开发环境：Flash Builder4,Vs2005 1、首先打开FlashBuilde4,创建一个名为HttpService_Net_Json的flex项目 （图1） 然后下一步,应用程序类型选择web,应用程序服务器类型选择ASP.NET(如图2) （图2） 下一步，出现配…
使用Node.js写一个简单的api接口
引入Http模块 默认你已经安装了Node.js Node当中内置了Http模块； 可以使用 var http require("http"); 复制代码引入http模块； Hello world 用Node.js实现一个HTTP服务器程序非常简单。我们实现一个最简单的Web程序， 它对于所有请求…
body,td,th {
三、继承中容易引起的错误有时候继承也会带来些错误，比如说下面这条css定义： body{color:blue} 在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧…
JavaScript实现 按钮不可过频繁使用
主要用到setInterval和clearInterval方法和一个计时变量。 效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta na…
二十分钟教你如何将区块链应用与函数计算相结合
前言 本篇文章适合对区块链应用感兴趣或是想要通过函数计算服务进一步开发区块链应用的新人。本文将结合阿里云区块链服务、阿里云函数计算服务、阿里云日志服务 以及社区应用 Marbles，手把手教大家如何将阿里云区块链服务与阿里云函数计算服务相结合，并…
【转】推荐！国外程序员整理的Java资源大全
构建 这里搜集了用来构建应用程序的工具。 Apache Maven：Maven使用声明进行构建并进行依赖管理，偏向于使用约定而不是配置进行构建。Maven优于Apache Ant。后者采用了一种过程化的方式进行配置，所以维护起来相当困难。Gradle：Grad…
科研成果汇总：收获的季节
感谢课题组各届成员(2006～2010级)长期不懈的努力与付出，特别感谢目前仍工作在第一线的各位成员的鼎力配合与协作，大家辛苦了！同时，还要感谢研究所对我们组的大力支持与帮助！谢谢大家！ BTW&#…
JavaScript 利用location对象实现跨页面传参
需求简述： 两个页面login.html和homepage.html，在login页输入用户名，点击登录会跳转到主页，主页拿到login页输入的用户名 实现思路： 1. 跳转：修改location.html 2. 拿参：处理location.searc…
编译u-boot时候，make distclean 出现rm：无法删除，****是一个目录
今天在编译u-boot的时候，make distclean，出现了rm:无法删除 "include/asm-arm/arch": 是一个目录。经过查看网友的解决办法，已经解决了。 具体解决办法：在uboot顶层有个mkconfig文件，vim打开后，在…
[转载]MaxtoCode对.Net程序加密的原理及解密探讨三（实例解密）
标 题: 【原创】MaxtoCode对.Net程序加密的原理及解密探讨三（实例解密）作 者: rick时 间: 2006-09-29,23:16:28链 接: http://bbs.pediy.com/showthread.php?t32658上一回我们试验了通过反射的方式获取method的源代码。这次我们就用一个实例来演示dump一…
MyEclipse教程：Web开发——创建Web片段项目
MyEclipse 在线订购年终抄底促销！火爆开抢>>MyEclipse最新版下载本教程向用户展示了使用关联的Web项目创建Web片段项目的机制。 用户还可以获得要检查的示例项目。 在本教程中，用户将学习如何：创建Web片段和关联的Web项目部署并测试包含…